Sent by Tribou, Eric on 16 July 2004 20:08
> Given the markup below, how should I modify it, so that the
> bottom and top edges of the colored "leftbox" and "rightbox"
> are always aligned
> regardless of the length of the content they contain?
The short answer is: you can't. You have to fake it.
You can define a background color on #container and also a background
image with the width of one of the columns and repeats vertically. The
background color becomes the background for one column, the background
image becomes the background for the other column. This requires you to
have the width of one of the columns explicitly defined in pixels.
#container { background: #fff url('/images/background.gif') repeat-y 0
0; }
Another option (although not as compatible across browsers.. if you care
about version 4 browsers at all) would be to add a border to one side of
#container, and set it at a width equal to the width of one of the
columns. Then use negative margin values to pull that column on top of
the border. The border becomes the background for the column, and the
background-color of #container becomes the background for the other
column.
#container { background-color: #fff; border-left: solid 30em #ccc; }
#leftbox { float: left; width: 30em; margin-left: -30em; }
You can see an example of this approach here:
http://www.redmelon.net/tstme/3cols2/
One other alternative is to use display:table-cell which will get the
blocks acting like table cells, and thus height:100% works as expected.
The CSS for this would be:
#container, #leftbox, #rightbox { display: table-cell; height: 100%; }
But IE treats 100% by going the full-height of the viewport, not the
height based on content, so you need to use a little IE hack to get it
to work as expected:
* html #container { height: 1%; }
This approach doesn't seem to work on IE/Mac and Safari. But I don't use
this approach myself so it could be that I'm missing a curcial piece of
CSS. I've put up a couple demos for this approach here:
http://webhost.bridgew.edu/etribou/layouts/temp/height/short.html
http://webhost.bridgew.edu/etribou/layouts/temp/height/tall.html
Good luck!
--
Eric Tribou
aka The Forgettable Mr. Ruthsarian
http://webhost.bridgew.edu/etribou/layouts/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
