Jamie_Q Jamie_Q - 1 year ago 60
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?


Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download