DIVs Arrangement - HTML CSS

Question

How can i construct above arrangement without using js ?

Thanks in advance !

Answer 1

You could use the holy grail technique: http://alistapart.com/article/holygrail

#div3 {
    display: block;
    background: blue;
    padding-left: 150px;
}

#div1 {
    width: 150px;
    float: left;
    margin-left: -150px;
}

#div2 {
    width: 100%;
    float: left;
}

What this does is create a 150px wide padding on the left of #div3, but it pulls #div1 into it with the negative margin.

This way the "100%" that #div2 uses is actually (100% - 150px) of #div3