Question

This is the HTML Code

<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

The Center Div got a fixed width the left and right div should use the remaining width

The CSS:

.left { float: left; }
.center { width: 500px; float: left; }
.right { float: right; }

What can i do that the left and right div uses the remaining width?

Answer 1

3 column fluid layout with a 500px center column

---

This is a difficult layout for sure. I found this demo page that emulates it:

http://www.gunlaug.no/tos/moa_27c.html

And was able to reproduce with a fairly small amount of CSS and HTML (you will have to change your markup). Demo: http://jsfiddle.net/jAsMx/

<div id="side1">
    <div class="col">
        <p>First</p>
    </div>
    <div>
        <p>Second</p>
    </div>
</div>
<div id="side2">
    <div class="col">
        <p>Third</p>
    </div>
</div>

#side1 {
    width: 50%;
    float: left;
    margin: 0 -260px 0 0;
    background: #fff;
    padding: 0 0 10px;
}
#side1 div {
    margin: 0 250px 0 0;
    min-height: 300px;
    background: #dda;
}
#side2 {
    width: 50%;
    float: right;
    margin: 0 0 0 -260px;
    background: #fff;
}
#side2 .col {
    background: #dda;
    margin: 0 0 0 250px;
}
#side1 .col {
    background: #fea;
    width: 500px;
    float: right;
    margin: 0 -250px 0 0 ;
    position: relative;
}
.col {
    /* For backgrounds: This is not an equal height layout yet... */
    min-height: 300px;
}

It uses negative margins to compensate for the fixed width of the center column, and 2-1-3 column ordering (which provides a minor SEO boost, as your main content is higher in the page source). While this is not a "ready-for-production" layout, it should get you started.