Question

I want to make 3 divs in one line. Left, middle, right.
Left and middle must have fixed size (300 px for example) and middle have to resize dynamically (in percents). Here is my css:

#content
{
    width: 100%;
    height: 435px;
}

#content_left
{
    float: left;
    width: 300px;

    height: 345px;
    border: 1px solid red;

}
#content_middle
{
    margin-left: 300px;
    margin-right: 300px;

    width: 100%;
    height: 345px;

    border: 1px solid green;
}

#content_right
{
    float: right;
    width: 300px;

    height: 345px;
    border: 1px solid red;
}
#wrap
{
    maring: 0 auto;
    clear: both;
    width: 100%;

    margin-left: auto;
    margin-right: auto;

    min-width: 1020px;
}

And here is my html:

<div id="wrap">
    <div id="content">
        <div id="content_right"></div>
        <div id="content_left"><div>
        <div id="content_middle">
        </div>
    </div>
</div>

alt text http://img509.imageshack.us/img509/8940/capturewj.png

How can I make my green div to fill all size between other 2 divs?

Answer 1

Your HTML has an error. The left div is not closed. It should be:

  <div id="content_left"></div>