Question

I have the following situation:

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

div1 and div3 have a fixed width of 100px and a height of 100%, div3 also has a height of 100%.
What i want is for div1 to float left, div3 to float right and div2 should take the remaining space between them. I cant seem to get it to work.

Any help?

Answer 1

Write like this:

CSS:

#div1{
    float:left;
    background:red;
    width:100px;
}
#div3{
    float:right;
    background:green;
    width:100px;
}
#div2{
    overflow:hidden;
    background:blue;
}

HTML

<div id="div1">1</div>
<div id="div3">3</div>
<div id="div2">2</div>

Check this http://jsfiddle.net/D8836/

UPDATED

If you want equal height then you can use display:table property for this. Check this

http://jsfiddle.net/D8836/11/