|
|
Posted by Jonathan N. Little on 06/14/06 13:59
fred.haab@gmail.com wrote:
> Jonathan N. Little wrote:
>> fred.haab@gmail.com wrote:
>
>>> Who is Jennifer Niederst Robbins? She wrote the "Web Design in a
>>> Nutshell" for O'Reilly. That doesn't make her a goddess of HTML, she's
>>> not one of the people who wrote the spec (as far as I know), she just
>>> wrote a book. However, I found in her book what I remembered.... page
>>> 371, second bullet point about floats:
>>>
>>> "The floated element stays within the content area of its containing
>>> block (the nearest block-level ancestor element). It does not cross
>>> into the padding."
>> I am sorry but it not what it says here, and they wrote the spec which I
>> thinks trumps!
>>
>> www.w3.org/TR/CSS21/visuren.html#floats
>
> Actually, I have read this. And, in fact, Jennifer's bullet points
> were a summary of that exact reference you site.
>
>> Scroll down a bit as I said earlier to the 3rd diagram, "A floating
>> image obscures borders of block boxes it overlaps."
>
> Again, these diagrams are not showing a parent/child relationship, they
> are one after the other.
NO it indeed does shoe a parent/child relationship, The diagram shows to
adjacent blocks with red borders, but the upper on had a floated
*child* image. The diagram illustrates how the floated *child* image not
only breaks out of its containing block but also extending into the
block adjacent to its *parent*. This is made visible because the floated
image obscures the border and margins of the two blocks with normal flow.
When you float an element to take it out of the normal layout flow, just
like absolute positioning, but unlike absolute positioning floats
displace the contents of the elements they overlap whereas absolute
positioned element do not.
Another this to note is that a floated element by default will not
stretch a parent's right and left sides and well as the bottom. See for
yourself:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Float DEMO</title>
<style type="text/css">
.dad { width: 300px; height: 300px; margin: 20px; }
.junior { background-color: #fdd; float: left; }
.wideload { width: 500px; height: 100px; }
.stringbean { width: 100px; height: 400px; }
.first { background-color: #ffe; }
.second { background-color: #fef; }
.third { background-color: #eff; }
</style>
</head>
<body>
<div class="dad first">
The parent DAD here is only 300px wide.
<div class="junior wideload">
So JUNIOR here likes everything supersized so is 500px wide
</div>
So even though JUNIOR is <strong>child</strong> of DAD,
DAD does not stretch wider to contain JUNIOR's extra girth,
as it is supposed to be.
</div>
<div class="dad second">
And as with this DAD as well, DAD is just an old square at
300px tall.
<div class="junior stringbean">
But his boy is destine for the NBA at 400px tall!
</div>
And although his <q>boy</q> is also a child element he cannot
contant his extra hight when JUNIOR is floated.
</div>
<div class="dad third">
In fact, the second DAD's JUNIOR will stick his <q>feet</q>
within this poor guy who is adjacent to DAD number 2. This is
the defaul an proper behavior for floats within and adjacent
to elements with normal flow.
</div>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|