2

I'm trying to have 4 divs: the first two are 25% width and 50% height, one with the other above it. The other div's are 25% width and 100% height, and then 50% width and 100% height respectively. I can't figure out how to line them all up side by side, because they bump each other down.

div {
  background: green;
  border: 1px solid white;
}

.box3{
  display: inline-block;
  width: 50%;
  height:360px;
  border: 1px solid rgba(255,255,255,0.3); 
  box-sizing: border-box;

}

.box2{
  display: inline-block;
  width: 25%;
  height:360px;
  border: 1px solid rgba(255,255,255,0.3);
  box-sizing: border-box;

}

.box{
  width: 25%;
  height:180px; 
  border: 1px solid rgba(255,255,255,0.3);
  box-sizing: border-box;

}
<div class="box"></div>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>

Here's an image showing what I want. enter image description here

This is so finnicky to work with, and when I put elements within the div's they also float around the page and do not stick in the actual div's, so I'm willing for entirely alternate solutions or frameworks that could make this easier as well.

1
  • create a main DIV with style display: inline-block, then inside this MAIN DIV put this boxes with float: left, try that instead of using display: inline-block on each
    – Alejo_Blue
    Feb 1, 2017 at 16:40

1 Answer 1

2

Flexbox makes things like that very easy: Codepen: http://codepen.io/SergiOca/pen/zNWrKP

HTML

<body>
  <div class="full-wrap">
<div class="first-wrap">
<div class="box"></div>

<div class="box"></div>
</div>

<div class="box2"></div>

<div class="box3"></div>
  </div>
</body>

CSS

.full-wrap{
  display: flex;
}
.first-wrap{
  display: flex;
  flex-direction: column;
  flex: 1;
}


.box3{
  flex: 2;
  height:360px;
  border: 1px solid black; 
}

.box2{
  flex: 1;
  height:360px;
  border: 1px solid black; 
}


.box{
  height:180px; 
  border: 1px solid black;
}
4
  • You're welcome, explore flexbox a little bit, it really makes layout things like that really easy. I recommend css-tricks.com/snippets/css/a-guide-to-flexbox
    – Sergi
    Feb 1, 2017 at 16:50
  • This is a little old, and may constitute for another question, but could you point me in a direction to make this mobile responsive? So if the screen is not desktop, not wide enough, the boxes will appear one above the other, instead of forcibly side by side, like I preferred above? Feb 1, 2017 at 18:42
  • Check this out: codepen.io/SergiOca/pen/zNWrKP I have added "flex-wrap: wrap which makes flex-items wrap to a new row. If you delete the "flex:1" or "flex: 2" properties you can just give the elements any width you want and they will wrap to a new row when the screen is resized.
    – Sergi
    Feb 1, 2017 at 18:50
  • This is awesome, and so simple! Thank you! Feb 1, 2017 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.