Sent by Roger Johansson on 16 October 2004 09:09
On 16 okt 2004, at 00.07, Linda Antonsson wrote:
> Kevin Wimmer wrote:
>
>> Linda,
>> You might be better off with something like the "Faux Columns"
>> technique [http://www.alistapart.com/articles/fauxcolumns/]. It would
>> simplify your design (no JavaScript needed) and is compatible with
>> most browsers (including IE and Mozilla). You can use it to create
>> two columns of equal height. (This will work with your page because
>> your sidebar is fixed width.)
>
> I have looked at that technique too, and as far as I can see it won't
> work so well with textured backgrounds. Unless I am misunderstanding
> how it works, that is. :)
Something that you may want to take a look at is using
display:table-row and display:table-cell.
It doesn't work in IE, so you'll still need a JavaScript for that. You
could use a conditional comment to send the JS to IE only, and avoid
bothering modern browsers with it.
A (minor) drawback is that you'll need to add a wrapper div around your
columns, making your structure something like this:
<div id="colwrap">
<div id="sidebar"></div>
<div id="main"></div>
</div>
The basic CSS would then be this:
#colwrap {display:table-row;}
#sidebar, #main {display:table-cell;}
I experimented a bit with this a while back:
<
http://www.456bereastreet.com/archive/200405/
equal_height_boxes_with_css/ >
<
http://www.456bereastreet.com/archive/200406/
equal_height_boxes_with_css_part_ii/ >
/Roger
--
http://www.456bereastreet.com/
______________________________________________________________________
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/