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