Fwd: [UPHPU] Good CSS two-column layout?

Fri Feb 15 08:26:35 MST 2008

---------- Forwarded message ----------
From: Nathan Lane <nathamberlane at gmail.com>
Date: Fri, Feb 15, 2008 at 8:22 AM
Subject: Re: [UPHPU] Good CSS two-column layout?
To: Walt Haas <haas at xmission.com>

Two columns?  If you don't define the height css property of a div, and
don't define the overflow property, then the div will automatically size -
if there is no content, then in Firefox you won't see the div, and in IE you
will see a div with the default line-height as the height, but ultimately
the contents would determine how high it goes.  On my website (
http://nathandelane.awardspace.com) I have a single column that does this
with simple css - no hacks involved.

<html>
    <head>
        <style>
            .column {
                width: 300px;
                float: left;
                margin-left: 10px;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div id="container" style="margin: 0px auto;width: 640px">
            <div id="div1" class="column" style="background-color:
#000000;">
                Hello div 1
            </div>
            <div id="div2" class="column" style="background-color:
#606060;">
                Hello div 2
            </div>
        </div>
    </body>
</html>

Does that work for you?

On Fri, Feb 15, 2008 at 7:49 AM, Walt Haas <haas at xmission.com> wrote:

> Wade Preston Shearer wrote:
> >> Does anybody know of a way to solve the two-column layout problem
> >> without using either a table or ugly non-portable looking CSS hacks?
> >
> > Will any of these offer assistance?
> >
> > http://anavidesign.com/examples/css_layouts/
> >
>
> They use the repeating background image approach.  That approach works
> OK if you can guarantee that a simple image will do the trick.  I was
> hoping to find something a little more general.
>
> Thanks  -- Walt
>
>
> _______________________________________________
>
> UPHPU mailing list
> UPHPU at uphpu.org
> http://uphpu.org/mailman/listinfo/uphpu
> IRC: #uphpu on irc.freenode.net
>

-- 
Nathan Lane
Home, http://nathandelane.awardspace.com

-- 
Nathan Lane
Home, http://nathandelane.awardspace.com