Floats in CSS not sitting properly - css

Question

I am trying to set up a grid with css. its a box layout with different sections but I can't get the far right section positioned correctly.
The div's should flow as follows:
Box 1 left
Box 2 beside box 1
Box 3 beside box 2
Box 4 sits underneath boxes 2 and 3
Box 5 same dimensions as box 1 but it floats to the right of boxes 2 and 3 and 4
I would post an image but it says I don't have a high enough score to.
CSS:
#container { width:960px; margin:auto; position:relative; height:350px; }
.box1 { width:240px; height:350px; float:left; }
.box2 { width:240px; float:left; height:175px; }
.box3 { width:240px; float:left; height:175px; }
.box4 { width:480px; float:left; height:175px; }
.box5 { width:240px; height:350px; float:right; }
HTML:
<div id="container">
<div class="box1"><span>Major Events</span></div>
<div class="box2"><span>Tours & Maps</span></div>
<div class="box3"><span>Visiting Information</span></div>
<div class="box4"><span>Video</span></div>
<div class="box5">Discovery Centers</div>
</div>

Answer 1

You could use display:inline-block instead of using float.
#container { width:960px; margin:auto; position:relative; height:350px; }
.box1 { width:240px; height:350px; display:inline-block; }
.box2 { width:240px; height:175px; display:inline-block;}
.box3 { width:240px; height:175px; display:inline-block; }
.box4 { width:480px; height:175px; display:inline-block;}
.box5 { width:240px; height:350px; display:inline-block; }
Fiddle

Answer 2

Craighead got half of the good answer with display: inline-block;.
If you do this, you will have a small margin. To remove it, just set the font-size of #container to 0.
JsFiddle Demo
#container { width:960px; margin:auto; position:relative; height:350px; font-size:0; background: blue;}
.box1 { width:240px; height:350px; display:inline-block; background : red;}
.box2 { width:240px; height:175px; display:inline-block;background : orange}
.box3 { width:240px; height:175px; display:inline-block;background : pink; }
.box4 { width:480px; height:175px; display:inline-block;background : green;}
.box5 { width:240px; height:350px; display:inline-block; background : red;}

Answer 3

The cleanest way to achieve this is as follows.
In your HTML, add a div.sub-wrap around .box2, .box3, .box4:
<div id="container">
<div class="box1"><span>Major Events</span></div>
<div class="sub-wrap">
<div class="box2"><span>Tours & Maps</span></div>
<div class="box3"><span>Visiting Information</span></div>
<div class="box4"><span>Video</span></div>
</div>
<div class="box5">Discovery Centers</div>
</div>
For your CSS, float .sub-wrap to the left and add overflow: auto to create a new
block-formatting context to keep the child floats in one panel.
#container div {
outline: 1px solid gray;
}
div.sub-wrap {
float: left;
overflow: auto;
width: 480px;
}
See demo at: http://jsfiddle.net/audetwebdesign/SJa5Y/
The results look like:

Answer 4

Fiddle: http://jsfiddle.net/Bushwazi/U3vkr/
HTML:
<div class="grid">
<div class="grid-left"><span class="box">Major Events</span></div>
<div class="grid-center">
<div class="box box50"><span>Tours & Maps</span></div>
<div class="box box50"><span>Visiting Information</span></div>
<div class="box footer"><span>Video</span></div>
</div>
<div class="grid-right"><span class="box">Discovery Centers</span></div>
</div><!-- /.grid -->
CSS:
.grid {
width:960px;
margin:auto;
height:350px;
}
.grid-left,
.grid-center,
.grid-right {
display: inline-block;
float:left;
width:25%;
height:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:solid 1px #d0d0d0;
}
.grid-center {
width:50%;
}
.box {
text-align: center;
padding:20px;
display: block;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box50 {
width:50%;
float: left;
}
.grid-center .box {
height:175px;
}
.footer {
clear:both;
border-top:#ddd solid 1px;
}