473,372 Members | 1,116 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 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 5380
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Aaron | last post by:
Hi, I'm trying to use style sheets instead of tables for layout, but I'm not sure on how to do something... I have a div (100% width) containing 3 other divs. Each needs to be lined up next to...
10
by: NoSpan | last post by:
I have this page that has layout like the following: (no frameset) ---------------------------------------- | header | |--------------------------------------| | ...
18
by: day | last post by:
I know I've seen this issue described before, but I can't find it, or the solution now that I need it. I have some css-specified floating divs that contain images or text. The text divs have a...
12
by: meltedown | last post by:
I would like the floating divs to float and then the header to come after them , on the left. That's what I thought clearing the floats was for, but in this example, the header is to the right of...
19
roula
by: roula | last post by:
I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them...
12
by: daniel2335 | last post by:
This problem is everywhere! I have read all forums available, spent about 40+ hours on it and lost a bit of hair. I was going to explain what its ment to look like but I just realised removing the...
2
by: rigiditymodulus | last post by:
Hi - So, I had this working perfectly, then had a small crash (the transmitter for my wireless mouse occassionally freaks out my MacBook Pro) and when I rebooted and opened up my file the two...
3
jhardman
by: jhardman | last post by:
I'm almost to the point of using tables to position my elements. That is how bad this is. So here's the rundown. I have an old page (created by someone else) that I was trying to update to...
4
dlite922
by: dlite922 | last post by:
This is just barely above my head when it comes to css. I have a div that needs to contain rows of floating divs, but I need each row not to wrap on to the next one and continue to go right. The...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.