[thelist] columns and damn columns.

Matt Warden mwarden at gmail.com
Fri Aug 6 22:21:08 CDT 2004


On Fri, 6 Aug 2004 14:19:57 -0700, Karl Jacobs <kj at studio.aero.org> wrote:
> OK, these columns apparently will not set to equal heights.  Also the

I think the point was that there isn't a good way to do this. What
you've got to do, as someone suggested, is use a background image to
make it look as if the columns are of equal height. In fact, even
though it will look like all three columns are of height equal to the
longest column, they will be of different heights.

> content under the set of columns is flowing UNDERNEATH the columns.
> What am I doing wrong?....

Well, it's somewhat difficult to tell what you mean. I put the CSS and
HTML you supplied into an HTML file but still couldn't really tell
what you were referring to. However, I played with it until I got it
to where I think you might want. i could be way off. I also cleaned
things up a bit. Here's the CSS:

#columns {
		background: url(images/column-back.gif) repeat-y;
		width: 780px;
		margin: 0;
		padding:0;
		border: 1px solid #000;
}

#leftcolumnfront {
		float: left;
		/*position: absolute;
		top: 218px;
		left: 0px;*/
		margin: 0 0 0 15px;
		padding: 10px;
		border: 1px solid #ccc;
		background: transparent;
		width: 208px;
}

#rightcolumnfront {
		float: left;
		/*position: absolute;
		top: 218px;
		left: 565px;*/
		margin: 0;
		padding: 10px;
		border: 1px solid #ccc;
		background: transparent;
		width: 208px;
}

#middlecolumnfront {
		float: left;
		/*margin: 0 0 0 232px;*/
		/*width: 294px;*/
		width: 204px;
		padding: 10px;
		border: 1px solid #ccc;
		background: transparent;
}

#cleaner {
		clear:both;
}

Note that I drastically reduced the width of one of the columns. I did
this just to avoid doing the math. If you want a more precise width,
remember to add widths + padding and make sure it is equal to or less
than the width of the containing div. It looks like you might have
gone to absolute positioning because you were having trouble with
floated divs not behaving as expected due to them being too wide.

If you would like to send the full HTML of the page you are playing
with to me offlist and explain exactly the problem you're having, I'd
be happy to take a look at it.




-- 
mattwarden
mattwarden.com


This email proudly and graciously contributes to entropy.


More information about the thelist mailing list