Aside from the fact that every time I open my mouth I reveal just how much I don’t know, I’m confused by the above statement about an absolutely-positioned element not being “seen” by the other elements and being “out of the document flow”.
I’ve read quite a few website pages concerning positioning (I always try to do some research prior to asking anything in any forum), and quite frankly, when you come right down to it, even the most floated element is absolutely placed as per the coder’s desires. I’ve placed my elements where I want them, and they appear to be in place when viewed in IE, Chrome, and FF.
Regarding my site (and I certainly want to use the “best” coding), and regarding my over-zealous use of absolute positioning, can you tell me, specifically, where the elements aren’t being “seen” by the other elements, and are “out of the document flow”?
When you turn CSS off, you’ll see the “document flow”. The elements who come first in source push down the ones who come afterwards. With CSS off, you’ll see plain ugly text who never overlaps each other, because they “see” each other, and follow the ideas in Flatland: in a 2-dimensional world, if two elements cannot occupy the same space at the same time (just like in our world), then one has to push the other out of the way. And they generally act like soap bubbles: they’re all trying to be as close to the top left corner as possible (top right corner if you’re doing arabic or hebrew page). Remove an element from the top, and the next one down will slide up to take its place.
When you have CSS on, you’re able to introduce the third dimension: depth. You can “pull” things over each other or just pick them up and tack them “on top of” other things, like setting one piece of paper over another. When you start doing this, you start disrupting the “document flow” (those set of inherent rules that forces elements to keep each other from overlapping each other because there is no 3rd dimension).
This isn’t a bad thing: disrupting the flow is how we create layouts.
But using absolute positioning to do it is (usually) going overboard, and creates very brittle pages (as you’ve seen: you have different amounts of content on each page, and the elements are rigidly staying exactly where you’ve placed them; they can’t adjust). Before anyone mentions it, yes, there are designers who’ve done “flowing” pages with all abso-po (andy clarke), but those are pretty much design experiments, not something most people would consciously use in the real world.
Floats are more complicated than simple 2-D document flow vs absolute positioning, but once you understand them, you’ll see why “good” pages can use floats without having to position them manually (if you see “position: relative” on a floated box, they’re usually not using that to place it on the page… positioning comes with other goodies we use).
The only reasonable way to let your content boxes push your footer down is to NOT position them manually.
Looking at your site, I think the first thing you want to do right now is give each of your main boxes some ugly background colours. This will show you what you’re doing in its full hideous glory. It’ll show you that your footer isn’t the only one having problems. The whole page is.
When you see the text overflowing out of your “panel” divs, you’ll see another danger in your code: setting explicit heights on elements. When designers write with the “flow” in mind, we also (generally) let the content set the heights of their boxes… again, so that those boxes can push the stuff below them further down.
How I would have written your page:
Everything you see in the top, down to the menu and the icons, I’d put in the box called #header. That whole thing looks like a header and header-type info. If you want to still manually position the stuff inside the #header for now, give #header “position: relative” which means when you absolutely position all the stuff inside it, they’ll all see #header’s top left corner as their reference for 0,0.
Then the middle part, I’d make one big box called #main or something. Inside #main would be each of your columns, which would be floated and with a set width. You won’t need to set a height on them, they’ll get stretched out by the text inside them. Most of them can have the same width, though you’d probably want a class on the first one to make it wider than the others. The rest don’t really need any classes or id’s:
#main div {
float: left;
width: whatever (i’d set it in em’s myself, but for now try pixels if you’re more comfortable with that)
}
#main .aboutme {
width: something wider;
}
I said floats were totally different and stranger than absolutely positioned boxes. They’re kind like Post-It notes: they’re attached to their container (#main) at the top, but they kind stick up towards you, so they’re not stretching their container as tall as they are. So we use technique to make the static box container (#main) to enclose its floats (tell #main it has floated children so that it will enclose them like it would with any non-floated children, regular document-flow stuff).
IE has bugs. One of them is something called HasLayout… which you can read about here. But simply, if you give #main a width, IE will make it enclose its floats.
For everyone else (and IE8 and 9): you can add this CSS
#main:after {
content: " "; /*we're creating "text" as a last-child of #main, which here is just a space*/
display: block; /*we make it a block element*/
clear: both; /*only blocks can clear floats*/
height: 0; /*just in case some browser shows the space*/
}
Now we’ve made a “non-floated child” inside #main and while #main won’t “see” the floats, it’ll “see” the non-float we’ve just added… and has to enclose it, so now the bottom of #main is the same as the bottoms of the floats inside.
Now for extra certainty, #footer will clear the floats as well:
#footer {
clear: both;
}
Since floats break the flow for block elements, those block elements have to “clear” the floats in order to be pushed down by them. Which is good enough for the rest of us.
If you’re interested in seeing people use margins and floats instead of absolute positioning to make page layouts, this book is old enough that it might be in your local library:
HTML Utopia: Designing Without Tables Using CSS by Rachel Andrews and Dan Shafer. Yeah, it’s a SitePoint book, but I’m plugging it because it’s the book that showed me really how to make layouts with CSS. It’s a beginner’s book and does NOT get into the real rules of floats, which is why the examples should look like pants in IE6 and 7, but it gets you started in a sane manner.
