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.

possible duplicate of [Expand div to max width when float:left is set](http://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set) — Dragos Rizescu, Apr 23 '15 at 07:33

meo · Accepted Answer · 2014-08-04T13:56:22.703

21

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/

edited Aug 04 '14 at 13:56

answered Nov 18 '10 at 08:13

meo

30,872
17
87
123

Thanks. That jsfiddle is a nice tool! – UpTheCreek Nov 18 '10 at 10:00
Thanks for this simple and yet well explained answer – John Christian De Chavez Jan 13 '17 at 09:53

AgentConundrum · Answer 2 · 2010-11-18T07:42:01.807

3

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; 
}

edited Nov 18 '10 at 07:42

answered Nov 18 '10 at 07:31

AgentConundrum

20,288
6
64
99

Without the float, the borders of c overlap with the borders of a and b - this causes problems. – UpTheCreek Nov 18 '10 at 07:32
@UpTheCreek: borders are part of the total width of an element. You need to take them into consideration when determining your margin-left on #c. For example, if #a and #b each have a 1px border, and assuming no margins/padding which would also add width, their total width would be 50px for content, and 2px for the border (1px left + 1px right), giving them a total width of 52px each, so #c would need to have a margin-left of 104px, rather than the 100px I assume you tried. – AgentConundrum Nov 18 '10 at 07:35
This answer (http://stackoverflow.com/questions/4208939/padding-on-floating-elements/4209218#4209218) I wrote earlier should clear things up a bit. – AgentConundrum Nov 18 '10 at 07:36

scheffield · Answer 3 · 2010-11-18T07:52:03.997

2

first of all its better to have a container with a fixed width. The next thing is that the 100% with of "c" is relative to the container, so it will spann the whole container width.

Update: To say it more precise: the c div needs no floating an no width. Like others already said: A div (as blocklevel element) spans by itselfe the whole width.

edited Nov 18 '10 at 07:52

answered Nov 18 '10 at 07:16

scheffield

6,618
2
30
31

Thanks. So there's no way of having the third div expand to fill the remaining space? – UpTheCreek Nov 18 '10 at 07:23
sadly we'll have to wait or ie to catch up – Sebastian Patane Masuelli Nov 18 '10 at 07:33
@meo: I *much* prefer fixed width to fluid/elastic/etc. You have a consistent frame of reference, and don't need to worry about the browser shrinking so far that things randomly overlap, nor that the browser will expand so far that your lines are so long that they affect readability, or that you have too much whitespace between elements. It's like drawing on a sheet of paper - if I draw a box in the (horizontal) middle of a piece of paper, it lands right where I want it, just like a fixed width design. It's not necessarily *better*, but it does tend to be easier. – AgentConundrum Nov 18 '10 at 08:25
I dont think you can say fixed is better then a fluid design. Both types have theyr reason to be. For webapps it where you have a lot of information on the screen it totaly makes sense to use a fluid layout. – meo Nov 18 '10 at 11:54

score 1 · Answer 4 · answered Nov 18 '10 at 07:22

1

I think just leaving out the width attribute at all for the c div should do the work. Normally DIVs will span the whole width they can get. This example worked for me:

<html>
<head>
    <style type="text/css">
        #a {
            width: 50px;
            height: 50px;
            float: left;

            background-color: #ffff00;
        }

        #b {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #ff00ff;
        }

        #c {
            height: 50px;
            background-color: #00ffff;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>

answered Nov 18 '10 at 07:22

philgiese

623
1
7
17

Without and width on c, it just expands wide enough to hold to contents - maybe becuase it's float:left? – UpTheCreek Nov 18 '10 at 07:26
Yapp. Just leave this out as my example showed. And by the way. Use Firebug! There you can easily add/remove/disable/change css properties while viewing the page. That way i figure out most of my CSS errors. – philgiese Nov 18 '10 at 09:02
But without the float the borders are messed up. – UpTheCreek Nov 18 '10 at 09:59

score 1 · Answer 5 · answered Nov 18 '10 at 07:28

1

Rather than floating #c, I'd give it a margin-left and leave the width as automatic.

answered Nov 18 '10 at 07:28

Xr.

1,410
13
23

Tried that, but unfortunately without the float on c, the borders overlap with a and b causing problems. – UpTheCreek Nov 18 '10 at 07:30
You can also set a margin on `#b` and tweak `#b`'s and `#c`'s margin depending on your borders. – Xr. Nov 18 '10 at 07:36

Ben · Answer 6 · 2010-11-18T07:44:30.653

1

Here you go:

<div style='width:200px;background:yellow;float:left'>One</div>
<div style='width:200px;background:orange;float:left'>Two</div>
<div style='background:khaki'>Three</div>

Can adjust One and Two widths as needed. Tested working in FF 3.6, IE 8, Safari 4.0, Chrome 3.195.

EDIT

Now, with borders:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid green;margin:0 -1px'>Two</div>
<div style='background:khaki;border:1px solid black;margin-left:400px'>Three</div>

EDIT 2

Non-overlapping borders (and contrasting colors), hot off the press:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid blue;margin:0 -1px 0 1px'>Two</div>
<div style='background:purple;border:1px solid orange;margin-left:403px'>Three</div>

edited Nov 18 '10 at 07:44

answered Nov 18 '10 at 07:29

Ben

54,723
49
178
224

Then the borders of c interfere with the borders of a and b. – UpTheCreek Nov 18 '10 at 07:31
Borders? Where are the borders in your example? But give me a minute, I'll put in borders. – Ben Nov 18 '10 at 07:33
Yes, sorry I was showing a simplified example - I didn't realise they were important until i tried removing the float. – UpTheCreek Nov 18 '10 at 07:35
your updated example won't work. You need to accommodate the borders into the margin-left on #c as well. Display width != width property. – AgentConundrum Nov 18 '10 at 07:37
@Agent, @Up - Yes, as @Agent said, the border for #c will be overlapped by the border on #b. Easy fix though, just change to `margin-left:401px`, or see edit 2 for all borders non-overlapping. – Ben Nov 18 '10 at 07:40

score 0 · Answer 7 · answered Nov 18 '10 at 07:23

0

#container {
float:left
width:100% /*for liquid layout*/
width:960px /*fixed layout*/
height:50px;
}

#a {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#b {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#c {
float:left;
width:90%;
/*or*/
width:860px; /* subtract the sum of the container a+b from the container c. */
height:50px;
}

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

If you add padding,margin right or left or both you must subtract them from the total width too.

answered Nov 18 '10 at 07:23

chchrist

18,854
11
48
82

I should have added in the question, that a and b must have pixel widths. – UpTheCreek Nov 18 '10 at 07:27
That's why I've added two values (in px and in %) – chchrist Nov 18 '10 at 07:42

CSS Div 100% with float:left

7 Answers7