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>