Sent by Richard Grevers on 14 October 2005 00:12
Browsing around in the wiki, none of the fluid two column layouts seem
to have equal length.
What I'm looking for is:
Two content columns, equal width, % based with % gutter. (see my
current css below): Left column to come first in source, either column
may contain more content.
Browsers are in strict mode.
* {margin 0; padding 0;}
#left {
border: 1px solid #fff; width: 44%; float: left; margin: 2%;
}
#left h2 {
font-family: geneva,arial,'lucida sans', sans-serif; color:#fff;
background: url(../img/left_h2.png); text-align: center;
position: relative; top: -7px; left: -7px; width: 225px; height: 30px;
font-size: 21px; line-height:28px;
}
#right {
border: 1px solid #fff; width: 44%;margin: 2%;float: left;
}
#right h2 {
font-family: geneva,arial,'lucida sans', sans-serif; color:#fff;
background: url(../img/right_h2.png) no-repeat; text-align: center;
position: relative; top: -7px; left: -7px; width: 225px; height: 30px;
font-size: 21px; line-height:28px;
}
I was surprised at how much % slack was needed for IE6 to provide for
the 4px of borders.
Second question:
Both columns will have a min width, either set via css or determined by content.
When this causes the right column to drop below the left, I would like
both columns to expand to use all available width (roughly 95%). Is
this possible? With or without javascript?
Just to make things really fun, I'd like to nest a similar pair of
expandable floats inside one of the columns.
--
Richard Grevers
New Plymouth, New Zealand
Orphan Gmail invites free to good homes.
______________________________________________________________________
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/
