Why isn't my float floating?
| Linda wrote: |
| I thought because the modules had a width on them they shouldnt occupy that space. |
I hear you. Floats are horribly, frustratingly facile. You could have had a thousand pixels left over for it to go in—and still, it seems to be saying, "Well, if there wasn't room for them to fit, I won't even bother trying!"
The ALM will easily "clear" this up eventually. No more crazy clearing, no more childish obstreperousness with floats holding on to the doorframe, no more absolute positioning making it impossible to "stack" elements vertically, and (good news for us markup purists) goodbye to all those "wrapper" elements! Suddenly, it won't take several months to learn enough CSS to develop a complex, multi-column, fluid CSS layout that's as robust as any dirty hacker's nest of layout tables.
Ben (Millard) reckons that the ALM isn't necessary for that. I reckon that he's too clever for his own good and doesn't realise how dumb the rest of us are.
(Seriously, check out how easy a three-column layout will be in that last link!)
| Gary wrote: |
| Here, have some chocolate to go with the coffee… |
*chocolate vanishes*
Share: 
... it is a step backwards we need to take to go forward. IE6 support will remain a huge deal breaker for many more years to come due to company networks being locked down by stubborn network managers.
In regards to this topic, I still believe creating columns from div's is the the most robust method and you can use min-height for browsers that support them to tidy up alignment of the "cells/boxes".
Johan De Silva / Portfolio
Share:
Anonymous table objects in CSS 2.1 means would this should create equal-height robust 3-column layout:
| Code: |
| #nav, #content, #sidebar {
display: table-cell; } |
| Code: |
| <ul id="nav">
<li><a href="/">Home</a></li> </ul> <div id="content"> <h1>Main Content</h1> <p>Yep, that's what it is. </div> <div id="sidebar"> [...] </div> |
CSS has an abundance of useful layout systems. All it lacks is widespread interoperable implementation. CSS 2.1 has only just gotten major implementation effort in IE8, so it'll be years before we can even use those features.
ALM is a daydream with ugly syntax for a subset of problems CSS 2.1 already solved years ago. (AFAICT.)
(EDIT) float isn't dumb, it's totally l33t. Just takes a while to learn how it works. Then a while longer to learn how it works in IE.
Share:
I knew I could rely on you, Ben.
Specifically, this is what really sold me on the ALM's CSS tables:
- There is a conceptual simplicity in grid-based layouts, and the syntax reveals this. Consider a layout with a header on the top, three equal height columns below (navigation, content and footer), and a footer spanning the bottom, with two subcolumns in the middle section below the main content. I can't think of a more concise way of expressing the spatial relationships of the sections here using conventional CSS compared to:*
| Code: |
| hhhh
nccs nabs ffff |
I consider display: table-cell to be a powerful addition to our arsenal, but I believe that the ALM offers a very significant improvement in the readability and simplicity of complex CSS grid layouts.
* To improve readability, IIRC, you could also write it:
| Code: |
| hhhhhhhhhhhhhhh
nnn ccccc sss nnn aa bb sss fffffffffffffff |
Last edited by Jordan Gray on 05 Jun 2009 01:28 pm; edited 1 time in total
Share:
| Ben Millard wrote: |
| float isn't dumb, it's totally l33t. Just takes a while to learn how it works. Then a while longer to learn how it works in IE. |
I have to say that when I saw what was happening, my first thought was, "I'm glad Ben's not here to see that I missed it!"
When I say that it's dumb, I don't mean that it's useless; just that it doesn't do anything amazingly intelligent in deciding where to go. They squeeze in where there's space for them, and look further afield when there isn't. In particular, they never look back—no matter how much you wish you could direct them to investigate that huge gap of a few hundred pixels that you lovingly carved for them!
When floats break and it's not IE, the gentle application of logic and Firebug is usually enough to make them spill the beans.
Share: