Understanding floating divs

#1

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

#2

"lyallex" <lyallex (AT) gmail (DOT) com> wrote

Quote:

Hi

Firefox 2.0
IE 7.0
Opera 9.22

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

Quote:

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

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.

Quote:

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, ?

Quote:

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.

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.

Quote:

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.

Quote:

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.

--
Richard.

#3

rf wrote:

Quote:

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.

Quote:

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 ...

Quote:

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

#4

lyallex wrote:

Quote:

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

--
Berg

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Understanding floating divs

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Understanding floating divs - 08-26-2007 , 04:17 AM

Re: Understanding floating divs - 08-26-2007 , 04:50 AM

Re: Understanding floating divs - 08-26-2007 , 07:42 AM

Re: Understanding floating divs - 08-26-2007 , 08:43 AM