CSS is usually pretty straight-forward. You can float a few things, and then you do some sort of clearing to get everything else underneath that.
For whatever odd reason, clear wasn’t doing a thing to my layout. I tried putting a bunch of cleared breaks on every second line, and still nothing. I tried putting :after tags in my CSS, and then I created a bunch of containing elements with floats. Eventually, on my last try, it worked.
I have no clue what it was that did it. I removed all those clears everywhere, and took out almost all the floats. It still works. I really haven’t the slightest clue what I ended up doing to fix it all. Maybe the body of the page needs to be in a container?
I originally chalked it up to the Chrome 1 I was using, but then it looked the same way in Firefox.
I guess I’ve still got a lot to learn.
Tags: CSS
Do yourself a favor and get comfy with clearfix:
http://www.positioniseverything.net/easyclearing.html
Use it and you will never have any clearing issues ever again, in any browser. And you don’t need clearing elements anymore either.
I’m pretty sure I did that. I may have had a couple differences in the exact rules, but I’m sure I had an :after with clearing.
Basically, nothing worked. Eventually, it worked. I stripped most of it down, and it still works. I’m really not quite sure what I did, in the end, but it certainly didn’t make any sense, which is most of the reason I made this post. I also can’t get tips and pointers from people, because I have no idea what wasn’t working in the first place; every single method I used did nothing (I mean, come on: sticking a bunch of elements with clear:both all over the entire page? That should’ve worked. It didn’t).
Thanks, though. I’ll take a closer look at the clearfix, because I had only given it a once-over before.
Actually…
I just looked through and tossed it in my stylesheet. I decided to try *:after, and that works, but it really shouldn’t; I have two floats beside each-other, but they aren’t clearing. Or do floats not clear themselves using this method?
At any rate, *:after makes it look the way I want, so I might as well keep it. I just wonder if it’s something to do with floating images, or if there’s just something really odd in my markup that I’ve never noticed.
Thanks!