|
|
Posted by Andy Dingley on 04/06/07 20:58
On Fri, 06 Apr 2007 20:58:24 +0200, Jens Lenge <Spampot@gmx.net> wrote:
>How can I make two columns the same height in a CSS-based layout
The best way is to use a <table>. This is the way for HTML+ CSS to
switch on a grid-based rendering mode, wherein adjacent columns set
their heights according to their neighbours, and they still calculate
their height from their content. This does what you need and it _works_.
You can also (in theory) set the CSS display property to a number of
table-like values. This would allow any elements to be made to behave in
this grid-like manner. However this feature was intended for use with
XML+CSS, not for styling HTML. and so browser support for it with HTML
is poor. HTML also has a perfectly good grid-like elemtn, it's called
"<table>".
You can't do it with CSS otherwise. You can set two boxes to be of equal
height, by setting their heights separately. You need to set this to be
either an explicit fixed height, or as a proportion of a common
container. Either way breaks the elements' ability to set their own
height automatically, based on their content.
There are JavaScript hacks to make the size of one element track
another. That's a hack.
No doubt someone will have others too, but you should probably use
<table> (if you want auto-sizing based on content).
Navigation:
[Reply to this message]
|