I wrote a website a while ago that is a little messy in how it does things. I used this CSS template and this equal height columns trick. I have not one but two container divs and I can't remember what they're doing. So I'm thinking of re structuring the thing from scratch, and possibly making use of the more "semantic" html5 tags like <nav> and so on at the same time.

The question is: is there a better way to achieve a site structure with these properties:

  • 2 equal height main columns (with widths as percentages of the available real estate, not explicitly stated)
  • both a header and footer element that stretch the whole width of the total of the two main columns
  • That allows the use of semantic html5 tags instead of meaningless divs

1 answer

joneff 28

Do you need equal height columns, or do you need your website to look like equal heights?

Also, noone said that when coding "semantic" markup you are not allowed to use divs. As divs are indeed quite semantic ;)

Anyway.. My point was that you can make your site look equal height quite easily. As a start you might want to add an extra div that wraps the columns (self cleared, relatively positioned). Then depending on your design, you might add a "dummy" decoration divs e.g. zen garden style. You make the z-index 0, so it's behind the columsn and with a bit of tiles and backgrounds you can achieve a lot.

I would give you a more defintie answer, but I need to see the design first. Frankly, your question is kinda vague and is open to many and different answers.

-- Ivan

Answered almost 4 years ago by joneff
  • when i say tiles i mean images that are tiled and backgrounds are images that are not tiled. joneff almost 4 years ago