I know I'm not done with the main content part of the design (blog posts, comments, sidebar), but I really wanted to get started with the footer. Just making it presentable, and well, THERE.
For now, I just want the footer to be the place where you can find more posts of mine, however you want to find it. Whether it be by category (via an other iteration of the main navigation), by label (which I suppose is just an other way of organizing the categories, just more messy I find), or by date (via the blog archives), anyone can find something else to read once they are at the bottom of the blog page.
So, I wanted to do a simple 3 column footer. Simple,ha! No such thing as simple when your coding apparently. Unless you've done it a million times, maybe.
The hierarchy should go like so:
footer-wrapper
footer
main navigation, labels, blog archive (all side by side)
But, making a 3 column is proving to be more difficult than it should be (apparently a common problem amongst even the best designers, so I don't feel so bad now). I want them to all be equal size, so I put all width 33.3333%. And yet they appear just one on top of the other, taking 33.333% of the width still. After trying a few things with floats (one float right, one float left, but what about the 3rd since no float center...) and it still not working, I google and found that your suppose to have them display as inline-block (because divs automatically use the next line, like an enter would in a word processor, so you need to tell it not to do that) (here). It works but they are all aligned with the bottom of the container box instead of the top, weird...
If I try to put them as all float left, like someone else suggested, then the background color disappears? Fixes my top alignment problem, though. Why does it not do that with my header, then , since I use floats on everything? Cuz the last div (main navigation) is not floated?
Ok, so let's try adding an other element below those 3 columns. I think I might have read something about this way back when.
Woohoo, that worked! With a clear both added though, or else it appears below the archives widget.
One thing that is driving me absolutely MAD (as in crazy, not angry, though a bit of that too) right now is that even if I do width 100%, there is still a bit of space on either side. I do not get it. The only bigger container is body, which if I put as 100% will move the footer slightly to the right and make it bigger than the window size, and it's got no padding or margin. I specifically took the footer out of the outer-wrapper to be able to have it full width. Websites do this all the time, so what gives?!
First battle won! TBC...
Continue Reading...
For now, I just want the footer to be the place where you can find more posts of mine, however you want to find it. Whether it be by category (via an other iteration of the main navigation), by label (which I suppose is just an other way of organizing the categories, just more messy I find), or by date (via the blog archives), anyone can find something else to read once they are at the bottom of the blog page.
So, I wanted to do a simple 3 column footer. Simple,ha! No such thing as simple when your coding apparently. Unless you've done it a million times, maybe.
The hierarchy should go like so:
footer-wrapper
footer
main navigation, labels, blog archive (all side by side)
But, making a 3 column is proving to be more difficult than it should be (apparently a common problem amongst even the best designers, so I don't feel so bad now). I want them to all be equal size, so I put all width 33.3333%. And yet they appear just one on top of the other, taking 33.333% of the width still. After trying a few things with floats (one float right, one float left, but what about the 3rd since no float center...) and it still not working, I google and found that your suppose to have them display as inline-block (because divs automatically use the next line, like an enter would in a word processor, so you need to tell it not to do that) (here). It works but they are all aligned with the bottom of the container box instead of the top, weird...
If I try to put them as all float left, like someone else suggested, then the background color disappears? Fixes my top alignment problem, though. Why does it not do that with my header, then , since I use floats on everything? Cuz the last div (main navigation) is not floated?
Ok, so let's try adding an other element below those 3 columns. I think I might have read something about this way back when.
Woohoo, that worked! With a clear both added though, or else it appears below the archives widget.
One thing that is driving me absolutely MAD (as in crazy, not angry, though a bit of that too) right now is that even if I do width 100%, there is still a bit of space on either side. I do not get it. The only bigger container is body, which if I put as 100% will move the footer slightly to the right and make it bigger than the window size, and it's got no padding or margin. I specifically took the footer out of the outer-wrapper to be able to have it full width. Websites do this all the time, so what gives?!
First battle won! TBC...
