How take two columns the same height?

J

Jens Lenge

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?

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>
 
B

Ben C

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?
Click to expand...

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.
 
A

Andy Dingley

How can I make two columns the same height in a CSS-based layout
Click to expand...

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).
 
B

Bernhard Sturm

Jens said:
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?
Click to expand...

no need to use tables for such a problem. this can be achieved within
CSS without a lot of magic.
With a simple trick this can be done with pure CSS: if you ask yourself
what is it that makes your two columns the same height, then you're
almost at the answer: it's the color of both columns (eg. green and
red), and not the actual height of the columns.

1.) Now the trick is to make the two columns transparent
(background-color:transparent;)
2.) then create a 1px-height GIF image containing a 120px long section
of red pixels and a 120px long section of green pixels, resulting in a
1px x 240px long GIF.
3.) place this GIF in the container div that holds the two coloumns as a
background-image:

background-image:url(1x240.gif);
background-repeat:repeat-y;

Now you have the perfect illusion of two columns always of the same
height, regardless of the amount of content the two columns contain...

HTH
bernhard
 
A

andrew

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?
Click to expand...
[...]

Hi Jens,

Is it not easier to fake it rather than indulge in hugely athletic CSS
and HTML? My own example (which does not acyually have fixed width
columns, although ths is a trivial matter to change) has 2 columns that
are _not_ equal height but _appear_ to be:

http://people.aapt.net.au/~adjlstrong/template_2.html


Andrew
 
A

andrew

Perfect! I've been looking for something nice and simple for my
son's preschool. I'll give you credit as well.
Click to expand...

Hi Adrienne,

I am more than a little flattered!

Andrew.
 
J

Jens Lenge

From the replies I learned that there are basically two ways to solve
the issue:

1. Use a table.

2. Leave the "true" height of the columns different and just make them
appear the same by a background color that comes from either a
background image or the border color of another div.

I think I need to play with the different solutions to become a bit more
experienced. Thanks for your hints!

Jens
 
B

Bernhard Sturm

1. Use a table.

2. Leave the "true" height of the columns different and just make them
appear the same by a background color that comes from either a
background image or the border color of another div.
Click to expand...

I would choose the solution that degrades most perfectly on various
UA-environemnts, and doesn't involve a lot of 'non-standard'-hacks (and
don't rely on java-script solutions, as you might get in trouble with
handheld UAs)

cheers
bernhard
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
How to position the *tooltip* comment on these buttons? 9
How to have two html audio players on one page? 0
Help with Visual Lightbox: Scripts 2
Aligned to the left 3
Help with code 0
How to properly insert a landing page within same container beneath an image element? 1
Having difficulty with the layout of these images / video for this web page 2

Members online

No members online now.
Total: 228 (members: 1, guests: 227)
Robots: 200

Forum statistics

Threads
474,432
Messages
2,571,680
Members
48,796
Latest member
Greg L.

Latest Threads

Top