|
|
Posted by Ben C on 04/06/07 20:35
On 2007-04-06, Jens Lenge <Spampot@gmx.net> wrote:
> Hello world,
>
> although this sounds like a FAQ to me, a have found no answer yet: How
> can I make two columns the same height in a CSS-based layout without
> using a table and without specifying a *fixed* height?
> Both columns have a fixed width and adjust their height so that the
> respective content fits in. Now the smaller height should be increased
> so that both columns have the same height.
>
> Can this be done with CSS only?
Not really, you're right that you need a table to link the heights of
two columns together like that.
Having said, there is a clever trick that will work in your case:
See:
http://groups.google.co.uk/group/alt.html/msg/ab5d96b7ce967612?hl=en&
Simply, add this in a <style> element in HEAD:
..magic
{
margin-bottom: -10000px;
padding-bottom: 10000px;
background-color: inherit;
}
And then then put <div class="magic"></div> first thing in each of the
floats; or use :before as in Maik Wiege's example if you don't want to
pollute your semantically pure HTML with the magic divs.
Finally, add <div style="overflow: hidden"> ... </div> around the whole
lot.
> Small example:
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
><html>
><head>
><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
><title>Example</title>
></head>
><body>
><div style="border: 1px solid black">
><div style="float:left; width:120px; background-color:red">
> This is column #1.<br>
> This is column #1.<br>
> This is column #1.<br>
> This is column #1.<br>
> This is column #1.<br>
> ... (more content)
></div>
><div style="float:right; width:120px; background-color:green">
> This is column #2.<br>
> This is column #2.<br>
> ... (more content)
></div>
> How to make the red and green columns have the same height?
></div>
></body>
></html>
Navigation:
[Reply to this message]
|