3 Column CSS layout sorted!!!!

3 Column CSS layout sorted!!!! (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Giomanach -> 3 Column CSS layout sorted!!!! (6/21/2004 15:50:31)

HOORAH!!!!!!

I finally found the answer...

Deb, your gonna be so proud of me lol. Haven't tested in Netscape, but it works in IE, Firefox and Opera, so I am assuming it works in Netscape. Here's the stylesheet:

body{
	margin: 0;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial, Sans-serif;
	background: #FFFFFF;
}

a{
	text-decoration: none;
	font-weight: bold;
	color: #000000;
}

a:hover{
	text-decoration: underline;
}

#title{
	position: absolute;
	width: 100%;
	height: 70px;
	left: 2px;
	font-size: 48px;
	font-weight: bold;
	font-style: italic;
	background: #EFEFEF;
}

#titleshadow{
	position: absolute;
	width: 100%;
	top: 2px;
	left: 4px;
	font-size: 48px;
	font-weight: bold;
	font-style: italic;
	color: #CCCCCC;
}

#slogan{
	position: absolute;
	top: 50px;
	left: 60px;
	font-size: 13px;

}

#nav{
	position: absolute;
	top: 70px;
	width: 100%;
	verticaL-aling: middle;
	text-align: center;
	font-size: 14px;
	border-top: 1px solid #CFCFCF;
	border-bottom: 1px solid #CFCFCF;
	background: #EEEEEE;
	left: 0px;

}

#nav a{
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}

#services{
	position: absolute;
	top: 90px;
	width: 130px;
}

.copyright{
	font-size: 10px;
	font-weight: bold;
}

#content{
	position: absolute;
	top: 95px;
	left: 140px;
	right: 140px;
}


legend{
	font-size: 12px;
	font-weight: bold;
}

.red{
	color: #FF0000;
}

.title{
	font-size: 24px;
	padding: 0;
	font-weight: bold;
}

#links{
	position: absolute;
	right: 0px;
	top: 95px;
	width: 135px;
}

fieldset{
	font-size: 10px;
}

Where was I going wrong all this time? Here's your answer:

You Don't Set A Width For The Middle Column

You just tell it how far from the left, and how far from the right or the browser edge, and it works fine. You only need to set a width for the two outer columns, and then define how far from the left and right the middle column needs to sit. Working Example: http://www.giomanach.com/anti-spam

[:D][:D]

Dan

<edit>
Please note - Working Example is a site under construction...
</edit>

c1sissy -> RE: 3 Column CSS layout sorted!!!! (6/21/2004 17:37:53)
Dan, I know on some layouts you don't need to set the width of the middle column. I'm not sure though about all types of layouts.(When I say different layouts what I mean is absolute, realtive float etc.) The one that I am working on is a floated layout. If you go HERE you will find several different layouts. Good job though letting us know what you found out. I'm sure that it will help a good bit. I know I didn't think about trying this, and it seems to be the obvious thing to do[;)]

Giomanach -> RE: 3 Column CSS layout sorted!!!! (6/21/2004 23:15:50)
Deb it does work with floats, as long as the positioing is absolute for the middle column. It should work for relative to, lemme see....

c1sissy -> RE: 3 Column CSS layout sorted!!!! (6/22/2004 8:58:30)
quote: ORIGINAL: Giomanach Deb it does work with floats, as long as the positioing is absolute for the middle column. It should work for relative to, lemme see.... I have it on the one page I am working on, and I don't have absolute positioning on mine. So its going to be interesting to see the combos it works and doesn't work on. One thing I'm runing into is the last column jumping, which is an IE bug. I'm going to create a try #5 and try some different thigns with it to see how it works out. http://giftdirectory.com/gift3.html Above is where I have it right now in try outs.

Giomanach -> RE: 3 Column CSS layout sorted!!!! (6/22/2004 9:02:16)
I can't see any foreseeable problems in the CSS, apart from the fact that you have set widths for all three, not just the out two, and as for relative positioning: You need to use a negative figure for the middle column, from top, not good Dan

c1sissy -> RE: 3 Column CSS layout sorted!!!! (6/22/2004 9:05:33)
Dan, negatives are recomended for positioning.[;)] And there is a reason for the negative, it needs to be on the nav section for a reason. Looking at css for the third one you won't see a width for the middle column. Its listed as bleft. No width set on it at all.

Giomanach -> RE: 3 Column CSS layout sorted!!!! (6/22/2004 9:09:02)
I don't like using negatives for position b'cos it tends to leave a large gap at the bottom of the page in IE[&:], or is that b'cos I use relative on all elements of the page? Lemme see if I can get a 3 column sorted that works WITH floats, relatives and absolutes......after I've finished client work lol, and the new anti-spam web....

c1sissy -> RE: 3 Column CSS layout sorted!!!! (6/22/2004 9:13:02)
The gap could be a mix of just about anything. I like the layout that I have right now. It has come a long way. And I like solving the problems by working on them and working them out as it helps me to learn. Which is why I have several version of the page now. I was doing so much changing that I just decided that each change I do I would just create a new version of the page with the previous changes still there to view if I needed to.

Page: [1]

0.0625