Question

I am sure this is simple but…

I have the following:

http://jsfiddle.net/SUBH3/1/

HTML:

<div id='wrapper'>
    <div id='panel1'></div>
    <div id='panel2'></div>
    <div id='panel3'>gest</div>
</div>

CSS:

#wrapper
{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
#panel1
{
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height:100%;
    width:35px;
    background-color:blue;
}

#panel2
{
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height:100%;
    width:240px;
    background-color:red;
}


#panel3
{
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height:100%;
    background-color:green;
}

What I want is to have the final green panel fill the rest of the space. I have tried a few things but cannot do it. I can use a table to achieve what I want, which is what I will probably do, I just want to know how I can do this with css?

I have tried this with list elements too, but end up with the same problem.

Answer 1

I get it I get it. You’re floating the other two panels, but if you don’t float the last one, it will fill the rest of the space. Normally it would float around the bottom of the left two containers, but because they are 100% height, it doesn’t.

Thus you should use this style rule:

#panel3
{
    height:100%;
    background-color:green;
}

http://jsfiddle.net/hGWyF/