Responsive CSS absolute top position

Question

I need your help! Been searching for a solution, but couldn't find one, so thought I should just ask it.

For a school project I need to postion a random number of halls into the right position on a map. As an example I just used 4 halls an just hard coded all the info that's retreived from a JSON with Angular as you can see in this CodePen

<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>

I already have solved the issue of resizing the halls, when the page gets resized. The only problem that remains is that the absolute positioning with top isn't working like it should.

Everything is calculated with a width of 1000px and a height of 500px in mind, but it should all resize if the browser also resizes.

Also getting the parent to adjust to the right height is something I struggle with. Can somebody please help me with this?

Astigmia

can you use percentages instead of pixels? – Fricke

Could try to do it with mediaqueries – Gombroon

I'm allready using percentages instead of pixels @yts. – Astigmia

Mediaqueries wouldn't help @StefanNeuenschwander , 'cause every pixel the brower gets wider, the hall are in a wrong position, just like every pixel the browser gets thinner. – Astigmia

@Astigmia indeed. I'm not sure why I thought it said px – Fricke

@Astigmia instead of using top: x%, try using top: 0 and use margin-top: x%. You might have to adjust what x is – Fricke

I'm not entirely sure what you want to achieve or what's the issue. You could use viewport units to solve the height issue of the parent max-height: 100vh; height: 500px; might be a good start. You might need to change the 100vh to something else, don't forget that you can use calc() as well. – Magda

That indeed solved the problem @yts! :-) It's adjusting like it should now :-) The only thing that needs to happen now is the adjustment of the parent (white background) – Astigmia

@shirfy: the problem is that when you resize the browser, the parrent (white background) doesn't change his height. Their should always be a margin of 15px between the halls (colored div's) and the border of the parent – Astigmia

Can you set you answer as solution @yts? – Astigmia

Answer 1

The problem is that when using the top property, percentages are calculated based on the height of the container, not its width. To fix this, set the top to 0 and then use margin-top: x%;. All margins are calculated based on the container's width, so the margin-top will shrink as well when the window is resized.

Fricke

No need for setting top anymore btw ;-) – Astigmia

You save my time, thank you @Fricke – Curzon

does set box-sizing to border-box make any difference in this answer? – Bikaner