2 replies [Last post]
mejobloggs
mejobloggs's picture
Offline
newbie
Last seen: 12 years 28 weeks ago
Timezone: GMT+12
Joined: 2006-01-26
Posts: 2
Points: 0

First off, my code: http://pastebin.com/531083 Sorry I can't give a link to the actual page, because there is no way for me to do so atm.

Let me explain a bit also.

It started nice and simple, I just floated the menu left, set width on the menu, and set left margin on the #content. I noticed then that when the #content had a few paragraphs in, the text next to the menu was slightly indented.

I then float the #content, which got rid of the indent, but now, if I have a small amount of content that doesn't fill up the page, then the #content div shrinks to fit content, instead of filling the rest of the page. This problem is where I am up to in the code above.

How should I be doing a two column layout? How do you people do them? It seems that if I put a fix for one thing in, something else breaks.

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

2 column layout help

Sounds like what you're experiencing is IE's 3-pixel jog.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mejobloggs
mejobloggs's picture
Offline
newbie
Last seen: 12 years 28 weeks ago
Timezone: GMT+12
Joined: 2006-01-26
Posts: 2
Points: 0

2 column layout help

Thanks for that link, it explains it nicely.

Is it better to use hacks to remove it, or to work around it by floating?

For my float way (as seen in my code), is there any way to make the #content div stretch to fill up the page? I could just make each h2 100% wide, which forces the div out, but that seems 'cheating' to me. I can't think of a case where I would have a page without a heading, but you never know.

Now that you supplied a name for the problem, I have found this: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15

They state three stages to fix it, but I found that the first two didn't do anything, but the last one fixed it.

Simple: add '* html #content {height:1%}' and it's done! Couldn't really understand all the stuff on the positioniseverything site.