Question

I have a a parent div that spans the width of the browser with padding at each side. Then I have 2 floating divs inside this parent. They are both set to float left. The first one has a set width and the second one I want to span the rest of the parent thats left over. When I put a background color on the second floating div it only shows up as the width of the text that is in the div. how can I get it to span the left over from the first floating divs with.

UPDATE
Ok here is a jsfiddle showing the setup.
JSFIDDLE LINK
The div that has a background that is red should span the rest of the parent even when you scale your browser.

Answer 1

Given that you want the second of the child div elements to be the full remaining-width of the parent, you’ve no need to float it. Given the following mark-up:

​<div id="parent">
    <div id="one">The first div, fixed width</div>
    <div id="two">The second, taking up the rest of the space.</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And CSS:

​#parent {
    width: 90%; /* adjust to taste */
    padding: 10px;
    background-color: #ffa; /* just to see where each element is in the document */
    overflow: hidden; /* to ensure the parent encloses the floated child div */
}

​#one {
    float: left;
    width: 100px; /* whatever width you need */
    background-color: red; 
}
#two {
    background-color: #f90;
}

This seems to give the effect you’re looking for: JS Fiddle demo, though tested only in Chromium 17 on Ubuntu 11.04.

---

Edited in response to comment from OP, below:

When I remove the float from my second div or in the jsfiddle example of mine .title the background fills the entire parent. Not sure what I’m doing wrong…

The problem is that the float-ed element is taken out of the document’s flow, and the second div (.title in your JS Fiddle) extends ‘behind’ it.

To prevent that you need to both remove the float from the second div (it’s still there in the link you posted) and also give a margin-left to the .title element, in order to prevent it taking the full width:

.title{
    padding: 17px 20px 0;
    background-color: red;
    height:54px;
    margin-left: 200px;    
}

JS Fiddle demo.

If you’re unable to give a margin-left for any reason, you could, instead, use height: 100%; on the float-ed div (.time), although this is problematic due to the padding (given that the height of the element is defined-height + padding):

.time{
    padding: 17px 20px 0;
    float:left;
    margin-right: 20px;
    height: 100%;
    background-color: black;
}

JS Fiddle demo.

To correct the height problem, in compliant browsers, you could use the box-sizing CSS property to include the padding in the height:

.time{
    padding: 17px 20px 0;
    float:left;
    margin-right: 20px;
    height: 100%;
    background-color: black;
    box-sizing: border-box;
}

JS Fiddle demo.