Jamie_Q Jamie_Q - 3 months ago 4x
CSS Question

CSS layout - three columns, with the middle column containing two boxes

My current layout looks like this: https://gyazo.com/5ed712dcea7d207b511220e3c73185da

I put A, B and C in the same div and gave them the same class name, and then did a .css file with this:

display: inline-block;
width: 32%;
vertical-align: top;

But I want to add D to the bottom of B so the layout looks like this:

Is there a way to do that?



I just wrapped div B and div D with another div to make it stay together. this is just the way i made it to show you how to handle this kind of layouts. but better way is to use flex property of css. other who knows flex well may help with the use of flex.

* {
	box-sizing: border-box;
.classname {
	display: inline-block;	
	vertical-align: top;
	border: 1px solid red;
.layout {
	height: 100px;
	float: left;width: 31%;
	margin: 5px;
<div class="classname layout">a</div>
<div class="layout">
	<div class="classname" style="width: 100%;height: 70px;">b</div>
	<div class="classname" style="width: 100%;height: 20px;margin-top: 10px;">d</div>
<div class="classname layout">c</div>