CSS layout not looking right

Dev Shed Forums Sponsor:

February 18th, 2004, 02:07 PM

Sotonin

Contributing User

Join Date: Mar 2003

Posts: 448

Time spent in forums: 12 h 25 m 25 sec
Reputation Power: 6

CSS layout not looking right

My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content.

I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS.

Code:

body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #C10E0E;
}

#leftcolumn {
	display: inline;
	float: left;
	left: 15%; 
	width: 150px; 
}

#centercolumn {
	float: left;
	width: 511px;
	height: 100%;
	margin-left: 2px; 
	padding: 8px;
	border-left: 1px solid #494949;
	border-right: 1px solid #494949;
	background:  url(/images/bg.png) no-repeat top left;
	background-color: #FFDCAA;
}

#rightcolumn {
	float: left;
	width: 150px;
	margin-left: 1px; 
} 

#mainnav {
	width: 150px;
	padding: 0 0 0 0;
	font-size: 12px;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #C10E0E;
	color: #FFDCAA;
}

#mainnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
		
#mainnav li {
	margin: 0 0 0 0;
	border-left: 7px solid #C10E0E;
	padding: 0 5px 0 0;
}

#mainnav li a {
	display: block;
	height: 15px;
	vertical-align: middle;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color: #C10E0E;
	color: #FFDCAA;
	text-decoration: none;
	text-align: right;
}

html>body #mainnav li a {
	width: auto;
	padding: 0;
	margin: 0;
}

#mainnav li a:hover {
	background-color: #C10E0E;
	border-left: 7px solid #FFDCAA;
	color: #FFF;
	padding: 0;
	margin: 0;
}
	
#mainnav h3 {
	padding-left: 5px;
	font-size: 14px;
	font-weight: bold;
	color: #F6D4A4;
	font-style: italic;
}

thanks!

__________________
-Sotonin

February 18th, 2004, 02:10 PM

DZA

Contributing User

Join Date: Feb 2004

Posts: 446

Time spent in forums: 21 h 46 m 34 sec
Reputation Power: 5

Perhaps i'm not following but you have the middle column's width set to 511px. It won't be anywhere near 100% (assuming you're even using low resolution) until that number is increased.

February 18th, 2004, 02:24 PM

lavalamp

Registered User

Join Date: Feb 2004

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

Generally, elements only extend down as far as they need to (unless you specify a height for them). This means that a page is only as long as it needs to be. When you specify a height of 100% for an element, it will expand to the same height as it's containing element.
But since the page is only as long as it needs to be, specifying a height of 100% for the middle column will do nothing.

I don't know a CSS way to make something extend to the full visible page height, sorry. On the other side of the coin, no-one is going to mind if your page stops short of the bottom, so don't worry about it.

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

Edit: I've just remembered an ala article that might interest you.

Last edited by lavalamp : February 18th, 2004 at 02:34 PM.

February 18th, 2004, 04:49 PM

Sotonin

Contributing User

Join Date: Mar 2003

Posts: 448

Time spent in forums: 12 h 25 m 25 sec
Reputation Power: 6

Quote:

Originally Posted by DZA

Perhaps i'm not following but you have the middle column's width set to 511px. It won't be anywhere near 100% (assuming you're even using low resolution) until that number is increased.

Height, not Width. Width is fixed.

Thanks for that ala link. it worked great. it was so simple as adding a background image to appear as if the column were extending to the entire browser window.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: