Moving from table to div driving me bonkers

[doncullen]

I’m from the old heyday from using tables as layout. I’d like to move to a div based layout to bring the site up to more modern specs. I’m not an expert on div positioning. That being said, this is what it’d look like using table:

Header




Left Column
Right Column




Footer

The width of the header and footer are set to 100%, the height of the header is set to 100px, footer to 50px, and the content takes up the rest of the space in the middle. In the content, there’s two columns, each take up 50% for width each. You’ll note I added padding to the left column (50px), this is to demonstrate padding works fine.

Now, when doing it via div:

Header




Left Column


Right Column




Footer

When you view that in a browser, the content goes past the footer. If I attempt to use absolute positioning, that results in padding behaving strangely in the corresponding div; padding will push content from the left (as expected), but it won’t push content from the top (as if it had 0px of padding — unexpected). Even doing padding-top: 50px !important; won’t be honored by the browser. This behavior seems to be the same in Firefox.

While I could just stay in the table layout since it works fine, I’d like to modernize it, and moreover, I’d like to understand div positioning better if I’m to stay with the times.

Thanks in advance for your time, and for your consideration/assistance! It most certainly is appreciated!

[Senff]

Congratulations on moving from tables to divs! You have taken your first step into a larger world.

Like @robskiwarrior said, you’ll need some tutorials and get down to the basics and underlying theory of div-based layouts. Once you have that, you’d understand why this situation is happening — you positioned the footer at the bottom of your page, regardless of all other content, so it will always stay there, even if the content grows more and more.

Instead, you probably want a so-called sticky footer. There’s various ways of doing this (and don’t worry, many people have gone mad about this, it has been quite a tricky issue for years), but this is my personal favorite: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Good luck!

[doncullen]

Thanks on the quick responses!

The issue is, I want the content to take up *all* of the middle space if there’s minimal content. You have it right on wanting a sticky footer though.

I could use min-height, but for some reason that isn’t being honored in all browsers, and problems come into play when using 100% for height. Is there a way to have the center section take up all of the space in the middle without using pixels? The reason why I’m so dead-set on using percentages is to ensure it displays as expected in all resolutions.

P.S. On an unrelated note, is there a way to subscribe to a forum thread as to get email notifications of responses to a thread?

[doncullen]

Thanks for the bookmark tip!

I just applied the solution as offered by the both of you; the middle space doesn’t fill up vertically. Adding 100% height to the left/right columns result in it going past the bottom.

This is the code with the sticky footer applied:

Header


Left Column


Right Column








Copyright (c) 2008

I suspect you’re using jsFiddle to run the table code I showed you. I just tested the table code out in jsFiddle, and it isn’t displaying correctly. While I’m not sure why jsFiddle isn’t displaying it correctly, you can see the intended display by saving the code directly to a html file and opening it in the browser.

[Senff]

If you want the yellow and orange colums to stretch all the way to the bottom, then that’s an additional thing you’ll have to do. Full height column are also one of those things that are tricky to do, and I believe there’s enough solutions for that (but I’m honestly not sure what is the best, fool-proof option).

[doncullen]

Wish I could show the design. I’m on a NDA, so what I can share is quite limited. In the top is the header, which contains a logo at top left. In the bottom is the footer, which contains the copyright. In the center is large web 2.0 style content. There’s a lot of empty spaces in the design. Which is why I need the yellow/orange columns to stretch to the bottom. Yes, yes, I know — web 2.0 is passè, but I’m not the one who designed it. I’m actually just a web programmer. I’m normally not the dude who chops up the graphics.

Guess I’ll hit Google again for a resolution/cross-browser compatible solution. Failing that, I guess I’ll just stick with the table layout since it works.

Thanks guys for your help, it was seriously much appreciated!

[Author]

Posts