You have a lot of you "facts" wrong.
> Floats are a pain as soon as you try to use proper positionning (relative /
> absolute) along with proper overflow.
Nope, they are not. Floats do not have any effect on positioning.
Positioning works the way it should around and inside floats.
(Except for a weird IE bug, where sometimes a floated element sibling
to a absolutely positioned element will make one of them disappear. If
I remember correctly the absolutely positioned one. The fix is to ad
another neutral element between them, lets say, wrap the positioned
element with a <div>)
> Floats should be used to place content alongside inline content to make said
> content flow around the floating element, adapting to its shape. It's
> perfect for, say, inserting a visual illustration within the paragraph it
> illustrates,
I wholeheartedly agree with you here
> and can be used in various hacks to keep a text-free zone to
> dress an element around some background-image decoration.
Lets say ok... though I'm not sure what you mean by this.
> What it shouldn't be used for however is replacing inline-block, because
> contrary to inline-blocks, floating elements aren't placed inside the inline
> flow but in the twilight-zone-ish floating flow.
Yes, flow doesn not replace inline-block, and float does not want to do that.
Yes, they are not in the normal flow, be it inline or block. Its not a
twilightish area.
They are in a... lets call it "float" flow.
> This means floating
> elements won't behave like real blocks nor real inline. For exemple they
> won't be taken in account by their block parent when it comes to deciding
> it's size, or for overflow (which causes various *nasty* "I scroll the div
> but the flows don't move" or "why the fuzz aren't they wrapping" bugs in
> various implementations of IE),
This is how you can force an element to take its flowed children into
consideration regarding their size:
1. If the parent is a float, it worked as expected.
2. If the parent is a block, you need to do the following:
a) Force the element to calculate its boundaries (by declaring an
overflow value usually) or (proffered)
b) Use a clearer and
c) Enable hasLayout of IE
Example code:
HTML
<div class="block">
<div class="float"></div>
</div>
CSS
.block { display: inline-block; overflow: hidden; }
.block { display: block; }
**
Of overflow doesn't work with the current Layout you are building, change it to:
CSS:
.block:after { content: '.'; display: block; clear: both; height: 0;
visibility: hidden; }
**
Setting the display property to inline-block enables hasLayout for IE,
then we can change it back on the following declaration.
Note. You can not reset it in the same declaration. It wont work.
And yes, we could use height or width or any other property that
activates hasLayout. I like this method because it won't force me to
use IE proprietary code and it doesn't scar my CSS code (by that I
mean setting a height or width when I do not want one. You can reset
the display property to whatever you need, and the hasLayout remains
active
> and positioning elements inside can be a
> pain (try it, you probably won't like it).
It works like a charm. Please give an example, and I'll show you where
you made a mistake.
> On the other hand, inline-block is exactly the way an <img/> behaves plus
> the advantages of proper positionning and reserving space as one should, and
> as far as IE is concerned it works great using a little initial and
> non-intrusive hack to make it IE7 compliant (I'm not too sure about IE6, but
> hey, it's already officially made obsolete by its maker...).
Glad to hear that you can afford to dodge IE6 so soon. The vast
majority of us still need to support it. And probably will need to for
a few more years. Probably around 3-5, depending on the scope of the
projects at hand.
> Plus it's the
> standard way to do things, so sooner or later IE will make a gre... a goo...
> a job of it.
Here is what you have got it the most wrong. Floats are NOT designed
for Layouts, and inline-block is NOT designed for Layouts.
For "real" Layouting we need to wait for the CSS3 Layout module.
See http://www.w3.org/TR/2009/WD-css3-layout-20090402/ and
http://www.css3.info/introducing-the-flexible-box-layout-module/ for
some ideas and implementations.
> Hope it helps.
Right now, floats and positioning are the best tools we have for
layouting. I'm not sure that inline-block can do a better job. It
might work good. I'm curious about the price tough.
--
Andrei Eftimie
http://eftimie.com
+40 758 833 281
Punct
http://designpunct.ro
