471,610 Members | 1,369 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,610 software developers and data experts.

floating divs and 100% width

How do you get both of these div's to have a 100% width? (1):

<div style="float: left; background: black; color: white">Hello, world!
</div>
<div style="clear: both; background: blue; color: white">Hello, world!
</div>

You could set the width inside the floated div to 100% but if you do
that and if you have a floated fixed width div, the 100% width div
will appear on a new line, as demonstrated (2):

<div style="float: left; width: 50px; height: 50px; background:
blue"></div>
<div style="float: left; width: 100%; height: 50px; background:
black"></div>

You could, in this case, use a nested div and have the outer div have
a black background while the inner div has a blue background, however,
sometimes you really are going to want to use floats. Here's an
example of using nested div's (3):

<div style="background: black; height: 50px">
<div style="background: blue; height: 50px; width: 50px; float:
left"></div>
</div>

So any idea how to achieve the effect in (2) while, at the same time,
using floats?

Here's a page that includes all the demonstrates:

http://www.frostjedi.com/terra/scrip...oat-width.html

Nov 7 '07 #1
11 5262
yawnmoth wrote:
>
http://www.frostjedi.com/terra/scrip...oat-width.html
There is no reason to float both divs.

Assuming you want the 2 divs together to take up 100% of the viewport
width, don't float the second div and it will take whatever horizontal
space is left.

--
Berg
Nov 7 '07 #2
rf

"Bergamot" <be******@visi.comwrote in message
news:5p************@mid.individual.net...
yawnmoth wrote:
>>
http://www.frostjedi.com/terra/scrip...oat-width.html

There is no reason to float both divs.

Assuming you want the 2 divs together to take up 100% of the viewport
width, don't float the second div and it will take whatever horizontal
space is left.
No it wont. It's *content* will though.

--
Richard.
Nov 7 '07 #3
In article
<11**********************@d55g2000hsg.googlegroups .com>,
yawnmoth <te*******@yahoo.comwrote:
How do you get both of these div's to have a 100% width? (1):

<div style="float: left; background: black; color: white">Hello, world!
</div>
<div style="clear: both; background: blue; color: white">Hello, world!
</div>
Remove the clear on the last div and see what you get.
You could set the width inside ...
Here's a page that includes all the demonstrates:

http://www.frostjedi.com/terra/scrip...oat-width.html
--
dorayme
Nov 8 '07 #4
In article <ba*****************@news-server.bigpond.net.au>,
"rf" <rf@invalid.comwrote:
>
"Bergamot" <be******@visi.comwrote in message
news:5p************@mid.individual.net...
yawnmoth wrote:
>
http://www.frostjedi.com/terra/scrip...oat-width.html
There is no reason to float both divs.

Assuming you want the 2 divs together to take up 100% of the viewport
width, don't float the second div and it will take whatever horizontal
space is left.

No it wont. It's *content* will though.
Fair enough point. This can be 'fixed' with a width on the float
and a margin-left for the float to sit in if its the divs that
somehow need to share the space rather than the contents.

--
dorayme
Nov 8 '07 #5
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
and a margin-left for the float to sit in
that is, a margin-left on the non-floated div...

--
dorayme
Nov 8 '07 #6
On Nov 7, 4:55 pm, Bergamot <berga...@visi.comwrote:
yawnmothwrote:
http://www.frostjedi.com/terra/scrip...oat-width.html

There is no reason to float both divs.

Assuming you want the 2 divs together to take up 100% of the viewport
width, don't float the second div and it will take whatever horizontal
space is left.
Interesting. This seems to work:

<div style="float: left; background: black; color: white">Hello, world!
</div>
<div style="background: blue; color: white">Hello, world!</div>

But if that works, why does this do what it does?:

<div style="background: black; float: left; width: 50px; height:
50px"></div>
<div style="background: blue; width: 50px; height: 50px"></div>

Here, it's almost as if the black div is being floated over the blue
div. Why wouldn't they be side by side as they are in the above?

Nov 8 '07 #7
rf wrote:
"Bergamot" <be******@visi.comwrote in message
>>
don't float the second div and it will take whatever horizontal
space is left.

No it wont. It's *content* will though.
Yes you are correct. It is what I meant, though.

--
Berg
Nov 8 '07 #8
On 2007-11-07, yawnmoth <te*******@yahoo.comwrote:
How do you get both of these div's to have a 100% width? (1):

<div style="float: left; background: black; color: white">Hello, world!
</div>
<div style="clear: both; background: blue; color: white">Hello, world!
</div>

You could set the width inside the floated div to 100% but if you do
that and if you have a floated fixed width div, the 100% width div
will appear on a new line, as demonstrated (2):

<div style="float: left; width: 50px; height: 50px; background:
blue"></div>
<div style="float: left; width: 100%; height: 50px; background:
black"></div>

You could, in this case, use a nested div and have the outer div have
a black background while the inner div has a blue background, however,
sometimes you really are going to want to use floats. Here's an
example of using nested div's (3):

<div style="background: black; height: 50px">
<div style="background: blue; height: 50px; width: 50px; float:
left"></div>
</div>

So any idea how to achieve the effect in (2) while, at the same time,
using floats?
You _are_ achieving the effect in (2) using floats. Do you mean you want
the effect in (3)?

How you're doing it is OK. Alternatively (4) don't nest them and give
the unfloated div a margin-left of 50px.

General tips:

1. 100% means 100% of the containing width _regardless of any floats
that might be there already_. It doesn't mean make the width "the
rest".
2. If you want something to fill all its available width just make it a
normal-flow block (i.e. not floated, display: block and position:
static). You should hardly ever need to set width: 100% on anything.

If you want two floats next to each other, the first of which has a
fixed width, and the second of which occupies whatever's left, I'm
afraid you just can't do that. But I don't know why you would need to.
What's wrong with (3) or (4)?
Here's a page that includes all the demonstrates:

http://www.frostjedi.com/terra/scrip...oat-width.html
Nov 8 '07 #9
On 2007-11-07, rf <rf@invalid.comwrote:
>
"Bergamot" <be******@visi.comwrote in message
news:5p************@mid.individual.net...
>yawnmoth wrote:
>>>
http://www.frostjedi.com/terra/scrip...oat-width.html

There is no reason to float both divs.

Assuming you want the 2 divs together to take up 100% of the viewport
width, don't float the second div and it will take whatever horizontal
space is left.

No it wont. It's *content* will though.
No it won't. Its *inline content* will though.

Just give it a left margin to leave room for the float (unless it only
has inline content and it doesn't matter).
Nov 8 '07 #10
On 2007-11-08, Bergamot <be******@visi.comwrote:
rf wrote:
>"Bergamot" <be******@visi.comwrote in message
>>>
don't float the second div and it will take whatever horizontal
space is left.

No it wont. It's *content* will though.

Yes you are correct. It is what I meant, though.
He's not correct. What he meant is, though.
Nov 8 '07 #11
rf

"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2007-11-07, rf <rf@invalid.comwrote:
>>
"Bergamot" <be******@visi.comwrote in message
news:5p************@mid.individual.net...
>>yawnmoth wrote:

http://www.frostjedi.com/terra/scrip...oat-width.html

There is no reason to float both divs.

Assuming you want the 2 divs together to take up 100% of the viewport
width, don't float the second div and it will take whatever horizontal
space is left.

No it wont. It's *content* will though.

No it won't. Its *inline content* will though.
Correct. :-) Although which "content" might not be inline in this context?
Just give it a left margin to leave room for the float (unless it only
has inline content and it doesn't matter).
Unless we are talking about a "two column" design in which case the margin
might be relevant.

--
Richard.
Nov 8 '07 #12

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Aaron | last post: by
10 posts views Thread by NoSpan | last post: by
12 posts views Thread by meltedown | last post: by
roula
19 posts views Thread by roula | last post: by
jhardman
3 posts views Thread by jhardman | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.