Problem with fluid layout in Chrome

Question

I have two columns. One with fixed size (220px) and the other that fills up the remaining space.

<div id="left-panel">

</div>

<div id="main-panel">
    Content
</div>

CSS:

#left-panel {
    float: left;
    width: 220px;
    height:auto !important;
    height:750px;
    min-height:   750px;
    border-right: 2px solid #d1d1d1;
    padding: 0px 0px 0px 30px;
}

#main-panel {
    margin: 20px 20px 0px 280px;
    overflow: hidden;
}

The problem is that in Google Chrome the main panel doesn't expand to fill up all the area. It creates a right margin with the width of #left-panel.

I can't float the main-panel or the content couldn't expand to the width of #main-panel in the other browsers. Is there any other way to let a floated element fill up the remaining space?

Here is a draw illustrating the problem:

Thanks for your help.

Answer 1

I think it's because of your left margin in #main-panel.

Try something like

#main-panel
{
   margin: 20px 20px 0px 0px;
   overflow:hidden;
}

Maybe you should wrap your left-pannel and main-pannel to avoid using a margin value in main-pannel.

Answer 2

The problem with your code is the overflow: hidden you added to the variable width column. Remove that and it will work fine.

Also, you should try cleaning up your code a little - there's a lot of useless properties in there. A basic implementation of this technique would be something like this: http://jsfiddle.net/8LF9F/1/

#fixed {
    width: 220px;
    float: left;
}

#variable {
    /* Width of #fixed + any margin you want */
    margin-left: 240px;
}

div {
    border: 1px solid #333;
}