Understanding floating divs

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

lyallex - 26 Aug 2007 09:17 GMT

Hi

Firefox 2.0
IE 7.0
Opera 9.22

I have the following html (there is no stylesheet, the ids are just
there for commentry purposes)

...

<body>
<div id='outer' style='border-style: solid; border-width: 1px;
border-color: rgb(0,255,0)'>
<div id='inner1'>goodbye</div>
<div id='inner2'>cruel</div>
<div id='inner3'>world</div>
</div>
</body>
</html>

Viewing this in a browser renders a green box, full width with the text

goodbye
cruel
world

What I actually want is

goodbyecruelworld

If I change the code to

<body>
<div id='outer' style='border-style: solid; border-width: 1px;
border-color: rgb(0,255,0)'>
<div id='inner1' style='float:left'>goodbye</div>
<div id='inner2' style='float:left'>cruel</div>
<div id='inner3' style='float:left'>world</div>
</div>
</body>

I get a solid green line (I guess this is an 'empty' <div>)
with goodbyecruelworld underneath the line (I guess this is outside the
'outer' <div>

Now my (currently rudimentary) understanding of styles leads me to
believe that a <div> is a container to which style can be applied, I
also understood that what goes on in a div was isolated from other <div>s

To confuse me even more the following code

<body>
<div id='outer' style='border-style: solid; border-width: 1px;
border-color: rgb(0,255,0)'>
<div id='inner1' style='float:left'>goodbye</div>
<div id='inner2' style='float:left'>cruel</div>
<div id='inner3'>world</div>
</div>
</body>

gives me what I'm after i.e

goodbyecruelworld in a screen wide green box.

I'm confused by this, why should adding style='float:left' to 'inner3'
cause such a fundamental change in the rendered output.

A link to a really good (easy to understand ?)tutorial on the float
style attribute would be great.

Thank You
Duncan L Strang

Reply to this Message

rf - 26 Aug 2007 09:50 GMT

> Hi
>
> Firefox 2.0
> IE 7.0
> Opera 9.22

Safari? Lynx? IE6? That monkey thing that has replaced Mozilla? :-)

> <body>
> <div id='outer' style='border-style: solid; border-width: 1px;
[quoted text clipped - 8 lines]
> with goodbyecruelworld underneath the line (I guess this is outside the
> 'outer' <div>

That is correct behaviour. A floated element is removed from the flow. That
is, as far as the outer div is concerned, the floated elements do not exist.
Since each div within your container div has been floated, that is removed
from the flow, the container div no longer has any content and so collapses
to what you see as a solid green line. It is, in effect and as you deduced,
an empty div, as far as its layout is concerned.

> Now my (currently rudimentary) understanding of styles leads me to believe
> that a <div> is a container to which style can be applied, I also
> understood that what goes on in a div was isolated from other <div>s

Er, ?

> To confuse me even more the following code
>
[quoted text clipped - 9 lines]
> gives me what I'm after i.e
> goodbyecruelworld in a screen wide green box.

This is correct behaviour. The outer div now actually has some content, the
div containing the word "world". This content will, of course, be pushed to
the right by the previous floated divs.

> I'm confused by this, why should adding style='float:left' to 'inner3'
> cause such a fundamental change in the rendered output.

See above. It really is a fundamental change, as far as the outer div is
concerned. In your first example the div has no content. In the second it
does. As far as its layout is concerned of course.

> A link to a really good (easy to understand ?)tutorial on the float style
> attribute would be great.

You really need to read chapter 9 of the CSS recomendations, the visual
formatting model. It's hard work but after a few readings you will see what
is going on. Just about every "tutorial" I have seen that tries to simplify
this gets something fundamentally wrong which makes the entire thing
useless.

One thing you should do when playing with this stuff is to put different
coloured borders around _everything_. This will show you exactly which bit
of page real estate each block level element is taking up, and where the
content is being pushed because of the floats. Firebug is good for this, you
can add borders to existing pages on the fly.

Signature

Richard.

Reply to this Message

lyallex - 26 Aug 2007 12:42 GMT

>> Firefox 2.0
>> IE 7.0
>> Opera 9.22
>
> Safari? Lynx? IE6? That monkey thing that has replaced Mozilla? :-)

Of course, I'll get them straight away ... well maybe later.

> You really need to read chapter 9 of the CSS recomendations, the visual
> formatting model. It's hard work but after a few readings you will see what
> is going on.

erk, I think you probably mean http://www.w3.org/TR/REC-CSS2/visuren.html
good grief, ah well, I've nothing better to do ...

> One thing you should do when playing with this stuff is to put different
> coloured borders around _everything ... Firebug is good for this, you
> can add borders to existing pages on the fly.

Wow, now THAT is a really useful tool.

Thanks for you advice

Duncan

Reply to this Message

Bergamot - 26 Aug 2007 13:43 GMT

> A link to a really good (easy to understand ?)tutorial on the float
> style attribute would be great.

http://brainjar.com/css/positioning/

Pay attention to the "clear" property, then read
http://www.quirksmode.org/css/clearing.html

Signature

Berg

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2007

Understanding floating divs