Fill remaining area with color?

Above is a screenshot of what I'm trying to accomplish. I tried setting height:100%, but I get an "overflow" caused by having margin-top:48px, causing me to scroll down even though the content fits on 1 screen. Right now the content is only up to the colored part (I edited it out for clarity).

It's CSS is:

#m开发者_开发知识库ain_area {
    float: left;
    width: 600px;
    margin-top: 48px;
    padding: 0px 20px;
}

.sidebar { /* this one here */
    float: left;
    left: 10px;
    width: 278px;
    padding-top: 48px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #FFFFFF
}

---

Alas, floated DIV's are not a good solution for what you're trying to achieve - this is one of those situations where you're going to have to revert to using a multi-column TABLE or get funky with Javascript.

Remember - when you float a DIV, it is essentially removed from the page flow layout and is floated over the page's contents. Setting the height to 100% won't set the height of your column to the height of the page it floats over - it sets the height of the floated DIV to the combined height of the floated DIV's contents.

There's a pretty good description of this in "Head First HTML" from O'Reilly.

To be honest, if you want to create really controllable multi-column page designs, TABLEs are likely to be your best bet.

---

I find something wrong with below css ,can you fix this first.

you gave left as 10px , but didn't mention as absolute , do you want this as absolute..??

and from the screenshot , i didn't get what exactly you want can you explain it more

  .sidebar { /* this one here */
        float: left;
        left: 10px;
        width: 278px;
        padding-top: 48px;
        padding-right: 20px;
        padding-left: 20px;
        background-color: #FFFFFF
    }

do the below code in window resize event

var docHeight = Math.max(
            $(document).height(),
            $(window).height(),
            /* For opera: */
            document.documentElement.clientHeight
        );
        var docWidth = Math.max(
            $(document).width(),
            $(window).width(),
            /* For opera: */
            document.documentElement.clientWidth
        );
        $("#yourdiv").css({
            "height":docHeight,
            "width":docWidth
        });                   
    }    

---

Better late then never. Thought this might help:

The htmls

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

The csss

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

You can view this @ https://github.com/gutierrezalex/two-column-layout