[thelist] css experts...2 col css..

sasha spam at bittersweet2.com
Mon Dec 30 15:19:01 CST 2002

On Mon, 30 Dec 2002 11:07:41 -0800 (PST), Tom Dell'Aringa
<pixelmech at yahoo.com> wrote:

> Hey all,
> I want the body of this page to have a split down the middle 50/50
> column, I'd like to use css. I also want it to have a footer and have
> both cols stretch to the same height like thus:
> +-----------+------------+
> | l side    | r side     |
> +------------------------+
> | footer                 |
> +------------------------+
> I know I can float the right side DIV, but how can I get it so that
> the shorter floated div (probably the right one) stretches to the
> same height as the left to meet at the footer? Is this doable? I
> don't want the left side bleeding under the right side if they have
> unequal content.
> Tom
> =====
> var me = tom.pixelmech.webDeveloper();
> http://www.pixelmech.com/
> http://www.maccaws.com/
> [Making A Commercial Case for Adopting Web Standards]
> __________________________________________________
> Do you Yahoo!?
> Yahoo! Mail Plus - Powerful. Affordable. Sign up now.
> http://mailplus.yahoo.com

| short      | long
|               | long
|               | long
|               | long
| footer                                 +-------------------------------+

If all you're concerned about is keeping the columns separate so that the
"long" div text doesn't wrap around the floated div, you need to add a
margin [right|left] that is the same width (or a little extra for padding
purposes) as the "short" div to the "long" div.  This extra margin will
probably need to be hidden from ns4, since depending on how it's coded, it
may or may not already have the desired result for you.  This probably
won't help you much if you want a particular background color/image to
extend all the way down on the short side.  But that can be solved by
making the body bg whatever you want for the short div, then set a bg for
the long & footer divs.

I find absolutely positioning the "short" div and relying on body [top &
right|left] margin/paddings to control the position the "long" div to be a
bit more reliable and less work getting it to work in ns4 if I'm using a
controlled size "heading" across the top.


More information about the thelist mailing list