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

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,开发者_JS百科 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)

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: ...
}

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;
}

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.

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>