[thelist] 3-column div hell....

Karl Jacobs kj at studio.aero.org
Fri Aug 6 11:51:53 CDT 2004


OK, you asked for it....   :-)

I stripped out all the hacks, and got the widths to work, but...   will 
this work cross browser, since I am avoiding margins?....

I need to get the columns to be equal height.  I've been looking at the 
sample at: http://www.pixy.cz/blogg/clanky/css-3col-layout/ but I can't 
seem to get the "cleaner" div to work. Right now, the content that goes 
below these divs is wrapping up underneath and behind the left and 
right divs.

How do I get equal heigths?.........

My css for the columns....

---------------------------------------

#columns {
}


#leftcolumnfront {
	position: absolute;
	top: 218px;
	left: 0px;
	margin: 0px 0px 0px 15px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #ccc;
	background: #666;
	width: 178px;
}


#middlecolumnfront {
	margin: 0px 0px 0px 200px;
	width: 358px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #ccc;
	background: #666;
}

#rightcolumnfront {
	position: absolute;
	top: 218px;
	left: 595px;
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #ccc;
	background: #666;
	width: 178px;
}

#cleaner {
	clear:both;
	height:1px;
	font-size:1px;
	border:none;
	margin:0; padding:0;
	background:transparent;
}

---------------------------------------

my html for the columns...........

----------------------------------------

<div id="columns">
<div id="leftcolumnfront">

We don't manufacture anything. Our greatest asset is the techn

</div>

<div id="middlecolumnfront">


We don't manufacture anything. Our greatest asset is the technic.

</div>

<div id="rightcolumnfront">

We don't manufacture anything. Our greatest asset is the technica

</div>

<div id="cleaner">&nbsp;</div>

</div>

----------------------------------



thanks,

-- Karl




On Aug 6, 2004, at 9:04 AM, Richard Davey wrote:

> Hello Karl,
>
> Friday, August 6, 2004, 4:29:50 PM, you wrote:
>
> KJ> I'm trying to do something that's easy with tables.  3 fixed-width
> KJ> columns, within a fixed-width area.
>
> Err, it's pretty easy with CSS too :)
>
> KJ> Can someone tell me why I should waste any more time trying to do 
> it in
> KJ> pure CSS (float, absolute, voice-family, Oh My!) when I can do it 
> with
> KJ> a simple table with 3 cells, and a simple div in each cell?...
>
> Because it's not hard to do? Why not post some code or a link to a
> test page on your site so we can check it over for you?
>
> Best regards,
>
> Richard Davey
> -- 
>  http://www.launchcode.co.uk - PHP Development Services
>  "I am not young enough to know everything." - Oscar Wilde
>
>
> -- 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>



More information about the thelist mailing list