> 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
> [email protected]
> 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.
_______________________________________________
UPHPU mailing list
[email protected]
http://uphpu.org/mailman/listinfo/uphpu
IRC: #uphpu on irc.freenode.net
