In my fight to stop people from using tables for layout in web design, there’s a couple of arguments I come across a fair amount. One is about pinning a div, like a footer div, to the bottom of another div and it stays there regardless of the parent div’s height. And the other one is positioning a div inside a parent div that’s been center on the page. Both of these things are easy to do when you know how to do them and for some reason the solution isn’t as wide spread as you would think it is. In fact, the way you position div inside another div is something that I only found out about a couple months ago. In fact I had a work around that worked pretty good, but used margins, which isn’t always the best way to go.
Let’s say you have this HTML:
And you wanted to position “right_block” over to the right side of the “wrapper” div. Here’s how I used to do it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #wrapper { width:800px; height:500px; background:#ccc; margin:auto; } #right_block { width:100px; height:200px; background:#222; position:absolute; margin-left:600px; top:50px; } |
If you set left to 600px then “right_block” will stay 600px from the left edge of the browser and 50px from the top no matter the width and height of the browser window. If you change left to margin-left, then “right_block” will be 600px from the left edge of the “wrapper” div and 50px from the top of it. If this works, then why not do it this way? Well, sometimes the margin can interfere with elements above it and this really isn’t the proper way to do it. But the solution is really simple. Just add position:relative; to “wrapper” in the CSS and then you can just position “right_block” the usual way.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #wrapper { width:800px; height:500px; background:#ccc; margin:auto; position:relative; } #right_block { width:100px; height:200px; background:#222; position:absolute; left:600px; top:50px; } |
That’s all there is to it. This is one of those things that really needs to be taught to web designers just starting out. And setting the wrapper div’s position to relative is also part of the solution to pinning the footer div to the bottom. Here’s our HTML:
Now we want to pin “footer” to the bottom of “wrapper” and maybe the page height varies from page to page on our site and we don’t want to have to set it’s position on every page. It’s really easy to do:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #wrapper { width:800px; height:500px; background:#ccc; margin:auto; position:relative; } #footer { width:800px; height:60px; background:#555; position:absolute; bottom:0; } |
“Footer” will be pinned to the bottom because we’ve set the “wrapper” div’s position to relative and “footer” to absolute. But what positions it at the bottom is bottom:0; That’s all it takes. Now the “footer” div will be at the bottom no matter what the parent div’s height is.
CSS positioning can be frustrating when you’re just starting out. But once you know tricks like this, it makes the temptation to use tables for positioning a lot less. With CSS3 looking like it’s going to be supported in Internet Explorer 9, tables for layout is going to limit the features you can use in your design. And when it’s this easy to solve some of the problems people seem to have with CSS positioning, there’s really no reason to ever use tables to layout your website.
I am an absent-minded photographer who took the mad decision a couple of months ago to create a personal website from scratch, having no notion of building websites whatsoever. After floating in the realm of HTML and CSS for a while I ran aground. While struggling with positioning the ‘playful’ footer on the page, I looked for help and your tips have been exactly what I needed.
^:)^