CSS Div 100% with float:left

Question

Agrh, CSS - the bane of my life. Can someone help out here?

I'm trying to get the following div layout:

*******************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*******************************************************************************

Currently my styles look like this:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
}

#b {
float:left;
width:50px;
height:50px;
}

#c {
float:left;
width:100%;
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

But this is causing the following to happen (div c drops below the others):

********************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
********************************************************************************

What needs to change to fix this? Thanks.

---

Additional info:

• a and b must have fixed pixel widths.

• This is a simplified example - in reality the divs have borders which must not overlap.

Answer 1

Just don't float the last div then its gonna work. Also remove the 100% width and give it a left margin of the width of your two fixed width divs. This should look like this:

http://jsfiddle.net/YMQbh/

Answer 2

Don't float the "c" div. As a block element, it will naturally take up the whole horizontal width of the viewport.

What you want to do is to simply use a margin on the left side of "c" to give "a" and "b" room beside "c"

Try this:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#b {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#c {
/*   2x 50px wide div elements = 100 px
 * + 2x  1px left borders      =   2 px
 * + 2x  1px right borders     =   2 px
 *                              =======
 *                               104 px
 */
margin-left: 104px; 
}