matt 0

How would I make a simple 2 by 2 layout with css as depicted in the diagram?

diagram

  • please help matt almost 7 years ago

1 answer

1
point

Simple. Create a "box" css class that is floated like this:

<style type="text/css">
div.box {
margin:0 1% 1% 0;
float:left;
clear:none;
width:48%;
height:300px;
border:2px solid #808080;
}
</style>

<div class="box">div 1</div>
<div class="box">div 2</div>
<div class="box">div 3</div>
<div class="box">div 4</div>

I've done the width in percentage, so it would always be 2x however many boxes you have on the page. This method supports 'orphan' or an odd number of boxes. :)

Answered almost 7 years ago by Gary Hepting