Question

I would like to create a specific layout in html but have some dificulties.

Images are easier to understand than words, so here is what I have:

This is fine, but as soon as the div1 gets heigher, I will have this:

And my goal is to have something like that:

For the moment, I am using divs, which is probably not the good idea. Any help is welcome.
Thank you very much in advance.

Answer 1

Divs are a great way to do it. You can use a floated layout with a containing div around the two right divs. Here is some code to show you what I mean:

HTML

<div id="wrapper" class="clearfix">
    <div id="sidebar"></div>
    <div id="main_content">
        <div id="top_right"></div>
        <div id="bottom_right"></div>
    </div>
</div>

CSS

#wrapper { background: #44BBF0; }
#sidebar { float: left; width: 100px; height: 500px; background: #485F40; }
#main_content { float: right; }
#top_right { width: 200px; height: 200px; background: #FF553F; }
#botom_right { width: 200px; height: 300px; background: #B0DE91; }

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1; /* IE < 8 */
}

Here is a JS fiddle link to show you how it looks: http://jsfiddle.net/ddxYB/

Make sure to clear the wrapper div. Because it contains only floated elements, it will have no height if you don’t. In the example I used, I set heights to save time, but this would just as well if you used automatic heights and let the divs take on the height of the content.

This is a screenshot from the JSFiddle code: