making 4 divs and a left menu div in html and CSS - html

Question

I didn't find something good that helps me so I'm asking a question, sorry if there is any answer lying around somewhere already
I want an html page wiht a header, left div for a menu, and in the middle (where you usually have 1 content div) - 4 divs for 4 graphs, and I want them to be aligned:
menu div | 1 2
| 3 4
I couldn't do that with float left, because number 3 doesn't stick to the menu, but to the left of the page...
any thoughts? (besides making everything super fixed, which is a solution I don't like)

Answer 1

HTML
<div id="menu">Menu</div>
<div id="content">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="d4">4</div>
</div>
CSS
#menu {
float: left;
width: 20%;
}
#content {
float: right;
width: 80%;
}
#d1, #d2, #d3, #d4 {
width: 50%;
}
#d1, #d3 {
float: left;
}
#d2, #d4 {
float: right;
}
See this fiddle.
Note You might want to give the 4 divs equal height depending on your content.
#d1, #d2, #d3, #d4 {
width: 50%;
height: ...
}

Answer 2

A variation on melhosseiny's answer.
The blocks will automatically compensate for different heights
fiddle
Markup
<div id="menu">Menu</div>
<div id="content">
<div class="content-block">
first block<br />
second line<br />
third line<br />
</div>
<div class="content-block">
second block
</div>
<div class="content-block">
third block
</div>
<div class="content-block">
fourth block
</div>
</div>
CSS
#menu {
float: left;
width: 200px;
background: #ccc;
}
#content {
margin-left: 200px;
/* for the benefit of ie6 double margin bug */
zoom: 1;
}
.content-block {
background: #efefef;
float: left;
width: 50%
}
/* every second block clears starting at block 3 */
.content-block:nth-child(2n+3) {
clear: left;
}

Answer 3

The details of your question are a bit vague, but perhaps a margin-left on item 3 equal to the width of your menu div would allow your float-strategy to work.
If you post your actual code, your question will afford more helpful responses.

Answer 4

If You don't want anything to be fixed, than probably this is the way to go :
<div> <!-- upper content -->
<div style="float:left">1</div>
<div style="float:left">2</div>
</div>
<div> <!-- lower content -->
<div style="float:left">3</div>
<div style="float:left">4</div>
</div>