[UPHPU] Good CSS two-column layout?

php at ericfaerber.com php at ericfaerber.com
Fri Feb 15 19:51:34 MST 2008


> 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?
>
> I'm referring to the situation where a page has two columns.  Each
> column needs to have its own background color different from the page
> background color, and we don't know in advance which column will be
> longer.  The basic problem is that CSS doesn't have a way to assign
> something like "height: 100%" to a div.  I've googled around and found
> two basic CSS approaches: one involves generating an image file to use
> as a background behind the column, and the other involves padding the
> column down to a location somewhere around St. George :-).
>
> Both of these techniques look like they are more trouble than they are
> worth.  Of course it is trivially easy to solve the problem cleanly
> using a table to lay out the columns, but before stooping to that
> obsolete way of doing things :-|) I thought I'd ask.
>
> Thanks  -- Walt
>
> _______________________________________________
>
> UPHPU mailing list
> UPHPU at uphpu.org
> http://uphpu.org/mailman/listinfo/uphpu
> IRC: #uphpu on irc.freenode.net
>

The padding/margin trick is what I use most of the time. It's very easy to
do and doesn't require much code. Below code should do it (I haven't
tested)

<div style="overflow: hidden;">
    <div style="float: left; width: 50%; padding-bottom: 999em;
margin-bottom: -999em; background: #FF0000;">Left col</div>
    <div style="float: right: width: 50%; padding-bottom: 999em;
margin-bottom: -999em; background: #0000FF;">right col</div>
</div>


The background image is also very easy. Just two bars of color in an image
and set as the background on the body or some block element. Then position
the divs over the top.

Neither of these two methods are hard. Both require less code than a table
would.



More information about the UPHPU mailing list