1

I'm new to HTML and CSS so please bear with me. I am trying to create a responsive grid where a parent div has 4 child divs contained within it. Resizing the browser both vertically and horizontally when there are no margins between the child divs works successfully. However, when I begin to create margins between the child divs, resizing the browser vertically causes the bottom child div to overlap the parent div - which I do not want.

I tried using the overlap: hidden property however this causes the bottom child div to be hidden (truncated) when the browser is vertically changed - again, I do not want this behaviour.

What I want is the child divs to have equal margins and when I vertically change the browser, the child divs to be contained within the parent div, regardless of the browser vertical size.

Here is my code:

html {
  width: 100%;
  height: 100%;
}
body {
  width: 70%;
  height: 100%;
  background-color: black;
  margin: 0 auto;
}
#div_container {
  width: 100%;
  height: 100%;
  background-color: white;
}
#div1 {
  width: 94%;
  height: 24%;
  background-color: green;
  margin: 0% auto 1% auto;
}
#div2 {
  width: 94%;
  height: 25%;
  background-color: yellow;
  margin: 0% auto 1% auto;
}
#div3 {
  width: 94%;
  height: 25%;
  background-color: blue;
  margin: 0% auto 1% auto;
}
#div4 {
  width: 94%;
  height: 25%;
  background-color: red;
  margin: 0% auto 1% auto;
}
<div id="div_container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
</div>

Hopefully my question makes sense - if not then please let me know. Any help would be greatly appreciated. Thanks

ckuijjer
  • 13,293
  • 3
  • 40
  • 45
Luke_Skywalker007
  • 117
  • 1
  • 13

2 Answers2

0

The percentage for the margin-top and margin-bottom is based on the width instead of the height. See the discussion in Why are margin/padding percentages in CSS always calculated against width?

It might be an option to take a look at the vh unit which allows you to set a size as a percentage of the viewports height

Community
  • 1
  • 1
ckuijjer
  • 13,293
  • 3
  • 40
  • 45
0

Like ckuijjer said, the vertical values are relative to the width and not to the height.

One solution would be the usage of calc.

.container div {
  height: calc(25% - 21px);
  width: 80%;
  margin: 0 auto 28px;
  background: #f00;
}

Here is an example on codepen. But the browser support isn't very good.

metodribic
  • 1,561
  • 17
  • 27
matuzo
  • 117
  • 8
  • Another solution is to align the elements equally with flexbox. [See the pen here](http://codepen.io/matuzo/pen/pvgNgj?editors=110) .container { width: 70%; height: 100%; background: #fff; margin: 0 auto 40px; display: flex; flex-direction: column; justify-content: space-between; } But again [browser support](http://caniuse.com/#search=flexbox)... – matuzo Dec 06 '14 at 13:55
  • Thanks for this information matuzo - I eventually went with the calc approach. I managed to add more child divs and noticed I had to tweak the px values however it worked. Thanks again. – Luke_Skywalker007 Dec 06 '14 at 23:26
  • Great, glad I could help. Just for clarification: we subtract 21px from each element, but we only want 3 elements to have space below them. So we split the 21px of the last element evenly on the first three elements (21px + 21px/3 = 28px) – matuzo Dec 07 '14 at 05:36