DIVs surrounding image (Probably easy answer)

Question

I have 3 divs in a header.

1. dynamic width
2. 55px wide with a background image
3. 200px wide

I'm trying to get the left div to fill the rest of the horizontal width, and I've read some answers already, but I can't seem to get them on the same line. I currently have:

CSS

body{
    background-color:#666;
    color:#666;
    margin:0;
    padding:0;
}
.container{
    width:80%;
    min-width:755px;
    margin:0 auto;
    background-color:#333;
    background:url(img);
}


.headerLeft{
    background-color:#333;
    height:64px;
    margin-right:255px;
}
.headerCenter{
    background:url(img);
    width:55px;
    height:79px;
    float:right;
}
.headerRight{
    background-color:#333;
    height:65px;
    width:200px;
    margin-top:14px;
    float:right;
}

HTML

<div class="container">
    <div class="header">
        <div class="headerLeft">dfg</div>
        <div class="headerRight">dfg</div>
        <div class="headerCenter">dfg</div>
    </div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

The image itself is just a curve, and the divs on either side are aligned to accommodate the curve, with a background image that flows through the curve. The problem I'm having is that the right and center divs are dropping down below the left div, even though they are lining up properly so that the size should be correct. The heights and margins are just there to make everything line up, but can be ignored for now just so I can get everything on the same line at least. Thanks in advance for any help.

Answer 1

Just switch the order of your divs and they'll behave as you want:

<div class="headerRight">dfg</div>
<div class="headerCenter">dfg</div>
<div class="headerLeft">dfg</div>

Your issue right now is that .headerLeft is coming before the other divs in the document flow. Once .headerRight and .headerCenter come first, .headerLeft will expand to fill the rest of the line.