Css position with interest

Question

I have a problem with the position of divs relative to another div.

I want to make a div that is in the horizontal middle of the screen, and in this div I want to place 3 other divs with the same height. But they all must respond.

There are more words in the picture :)

<div id="zwrapper"> <div id="z1" class="row"></div> <div id="z2" class="row"></div> <div id="z3" class="row"></div> </div> 

The blu element is HTML

 html{ background: steelblue; height: 100%; width: 100%; top:0; left:0; bottom: 0; right:0; } 

One lime is that div (#zwrapper) , where I want to add three red divs.

 #zwrapper{ height: 81%; top: 10%; width: 100%; left: 0; position: absolute; background: lime; } 

Red divs create problems. All divs are 30% high. The first should be aligned at the top, and the third at the bottom. The middle div with id #z2 is the only one that has a margin of 5% .

 .row{ position: relative; width: 80%; background: red; height: 30%; } #z2{ margin: 5% 0; } 

My idea was to put 3 divs with a height of 30% in a wrapper and give the middle margin (top / bottom) 5% to get a height of 100%. But that does not work.

If I resize the window in width, the height of the red divs changes, although I do not change the height.

I am doing a violin to demonstrate this. http://jsfiddle.net/ELPJM/

Thanks in advance

Answer 1

The problem is that percentages in margin always refer to the width, not the height. You can achieve this by using absolute positioning instead and setting a “top” value for each row. Like this:

 .row { position: absolute; width: 80%; background: red; height: 30%; } #z1 { top: 0%; } #z2 { top: 35%; } #z3 { top: 70%; } 

http://jsfiddle.net/ELPJM/8/

Answer 2

This is your margin: 5% 0; which changes the height. I'm not sure that margin-top and -bottom measures its percentage, but not from what the height of the parent element is. Therefore, you cannot use it to calculate up to 100% of the height.

try this instead:

 <div id="zwrapper"> <div id="z1" class="row"></div> <div class="spacing"></div> <div id="z2" class="row"></div> <div class="spacing"></div> <div id="z3" class="row"></div> </div> 

with style:

 .spacing{ height: 5%; } 

Answer 3

HTML

 <div id="zwrapper"> <div class="holder"> <div id="z1" class="row"></div> <div id="z2" class="row"></div> <div id="z3" class="row"></div> </div> </div> 

CSS

 html,body{height: 100%;} #zwrapper{min-height: 100%;} #zwrapper:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle; width: 1px; } #zwrapper.holder{ display: inline-block; vertical-align: middle; } 

Answer 4

That should solve it.

 .row{ position: relative; width: 80%; margin:0 auto; background: red; height: 30%; } #z2{ margin: 5% auto; }