100% Height for Left Column

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

rfox@scoe.net - 25 Jul 2006 02:06 GMT

I have a two-column layout where I want the left column to have a
colored background while the right column (main content div) has a
white background. Please see http://www4.scoe.net/rfox/nest/index4.html

My problem is that the colored background in the left column only
extends to the height of the content leaving a white gap below it. How
can I make the left nav's color stretch the entire height?

On a side note, in Internet Explorer and only Internet Explorer, the
photo in the gray message box disappears, but is fine in every other
browser. Any ideas on that wacky issue?

Thanks.

-Ray

Reply to this Message

Wes Groleau - 25 Jul 2006 04:31 GMT

> My problem is that the colored background in the left column only
> extends to the height of the content leaving a white gap below it. How
> can I make the left nav's color stretch the entire height?

The default skin for nucleus (http://www.nucleuscms.org)
solved that by having a div _outer_ to both columns, and
doing a vertical-only repeat of a gif of the same color
as background behind that column.

I'm not saying that's the best way, but that's what they did.
When I widened the column in the CSS, it took me quite a while
to figure out why (it seemed) that the blocks _in_ the column
widened but the column itself did not.

Signature

Wes Groleau

Beware of the man who works hard to learn something, learns
it, and finds himself no wiser than before ... He is full of
murderous resentment of people who are ignorant without having
come by their ignorance the hard way.
-- Kurt Vonnegut

Reply to this Message

boclair - 25 Jul 2006 05:07 GMT

> I have a two-column layout where I want the left column to have a
> colored background while the right column (main content div) has a
[quoted text clipped - 11 lines]
>
> -Ray

Suggest

Set the left margin on left column to 0

Add a left border rule to content class of the appropriate color, solid
and the width of the left column.

Louise

Reply to this Message

rfox@scoe.net - 26 Jul 2006 00:58 GMT

Thank you both for your suggestions. I tried 'em both out, but in this
instance, they created more problems. I can't believe there's not a
simple and effective way to achieve this. :/

I wound up adding a spacer image at the bottom of the left column and
adjusting the footer's z-index to float above it. Not elegant, but it
works.

Thanks again.

-Ray

Reply to this Message

rfox@scoe.net - 28 Jul 2006 01:15 GMT

For those that follow with the same issue, a simple method to achieve a
two column layout with both columns appearing equal in height can be
found at:
http://www.alistapart.com/articles/fauxcolumns

-Ray

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2006

100% Height for Left Column