floating div spanning parents width

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.

If the first one has a fixed width, can't you just give the second one a fixed width too? — francisco.preller, Mar 05 '12 at 22:40

David Thomas · Accepted Answer · 2012-03-06T00:35:46.063

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.

Tested for you also in Chrome 17 with Windows 7, neat code bud :) — francisco.preller, Mar 05 '12 at 23:18
Can you check out why mine is not working. looks similar to yours. http://jsfiddle.net/8JyMv/2/ — Chapsterj, Mar 05 '12 at 23:33
Put the css code you're looking on an answer below for readability, although David Thomas should be the one with the green tick here :) — francisco.preller, Mar 05 '12 at 23:47
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 as I have stripped mine down to be similar to yours. — Chapsterj, Mar 05 '12 at 23:47
You need to add a height and background color attributes to your floated div. — francisco.preller, Mar 06 '12 at 00:00

score 0 · Answer 2 · answered Mar 05 '12 at 22:38

This is not possible with simple css. Either you use table-layout which is not very neat - or you do a javascript fix which is also not neat but the better solution i'd say.

Nevertheless: You could do workarounds if it's only important for bgcolor or something like that. Is it?

score 0 · Answer 3 · answered Mar 05 '12 at 22:39

0

I think the best thing you can do is figure out what the remaining space is and set the second div to be that wide. Since you said the first div is a set width anyway, there isn't any reason the second div can't be a set width as well.

answered Mar 05 '12 at 22:39

Keith Frey

691
4
13

score 0 · Answer 4 · answered Mar 05 '12 at 22:57

0

If you set the left div to a fixed width and floating left, like you mentioned, then you can just set the margin of the next div to the width of the first one, and make sure it's not floating. For instance:

#left_div{
float: left;
width: 180px;
}

#right_div
{
margin-left: 200px;
}

That should work fine.

answered Mar 05 '12 at 22:57

Jason Logsdon

507
5
19

How would this make the second one stretch the width of the remaning parent? – Chapsterj Mar 05 '12 at 23:06
If you don't set a width for a div it defaults to the full remaining width. Give it a test and you should see it expand with the window. – Jason Logsdon Mar 05 '12 at 23:21
And you need the left margin in there to ensure that div 2 doesn't snap back to the left if it is longer than div 1. I think @David Thomas' answer will incorrectly do that. – Jason Logsdon Mar 05 '12 at 23:30
1

I removed the float and added the margin to your jsfiddle demo http://jsfiddle.net/8JyMv/8/ – Jason Logsdon Mar 06 '12 at 00:03

score 0 · Answer 5 · answered Mar 05 '12 at 23:46

Following from your jsfiddle link on your comment under David Thomas' answer. Here is the adjusted css.

.holder{
 color:#fff;
 clear:both;
 width: 100%;
 background-color:#2d2f31;
 height: 70px;
 padding-bottom: 1px;
 margin: 12px 0;
}

.time{
padding: 17px 20px 0;
float:left;
margin-right: 20px;
height: 54px;
background-color:#2d2f31;
}
.title{
padding: 17px 20px 0;
background-color: red;
height:54px;         
}
.title span{
display:block;
font-size:12px;
line-height: 1.25em;
color:#646464;
}

floating div spanning parents width

5 Answers5

Linked