div - stretch the nav to fit height of content

TeviH · 08-31-2005, 07:35 AM

Hello all!

I have a little problem. I am trying to make 100% CSS no-tables design (finally). I have the navigation float:left to allow the main content to come and sit next to it. They're all in separate divs, and it's positioned fine. The only issue is that I have a background image in the navigation and I want to have the navigation fit the height of the main content so the background will repeat all the way to the bottom.

The whole page is centered in the screen.

Here's my code:

Code:

div#container {
	width: 760px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #000000;
	}

div#header {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 760px;
	padding: 0px;
	margin: 0px;
	}

div#leftnav {
	text-align: center;
	width: 169px;
	background-image: url(http://cdn.namepros.com/images/sidenav-bg2.jpg);
	padding: 0px;
	margin: 0px;
	float: left;
	height: 100%;
	}
	
div#main {
	padding: 0px;
	margin-top: 0px;
	margin-left: 169px;
	width: 591px;
	}

I didn't expect the "height: 100%" to work... but what should I be doing?!
????: NamePros.com http://www.namepros.com/programming/119830-div-stretch-nav-fit-height-content.html

Thanks!

kpm547 · 08-31-2005, 07:49 AM

try min-height:100%

That is supposed to work and probably will with FF, but EI Doesn't render it properly all the time.

TeviH · 08-31-2005, 11:38 AM

doesn't work!

So much for a pure css site... be a lot simpler to just use tables. So far, I'm not convinced I need to switch 100%...... CSS is great, but some things are just done better in regular html.

TeviH · 08-31-2005, 09:15 PM

Ok, curious for people's opinions (yes, this is an old topic, but rather than read an article or a book, I want to see your opinions.)-

I can do this page with CSS or HTML. HTML will require a table to set the layout, which is fairly compatible with every browser. Pure CSS - divs - to set the layout will require multiple divs, unnecessary divs, nested inside each other, all sorts of markup to make sure it displays correctly on all browsers....blahblahblha... Why would someone say to switch completely to CSS?! Sure I use CSS a lot to get the best out of my design, but why throw away something so simple and straightforward as HTML tables?!

08-31-2005, 07:35 AM	THREAD STARTER #1 (permalink)
TeviH NamePros Regular Join Date: Jul 2005 Location: Florida Posts: 233	div - stretch the nav to fit height of content Hello all! I have a little problem. I am trying to make 100% CSS no-tables design (finally). I have the navigation float:left to allow the main content to come and sit next to it. They're all in separate divs, and it's positioned fine. The only issue is that I have a background image in the navigation and I want to have the navigation fit the height of the main content so the background will repeat all the way to the bottom. The whole page is centered in the screen. Here's my code: Code: div#container { width: 760px; padding: 0px; margin-left: auto; margin-right: auto; border: 1px solid #000000; } div#header { margin-left: auto; margin-right: auto; text-align: center; width: 760px; padding: 0px; margin: 0px; } div#leftnav { text-align: center; width: 169px; background-image: url(http://cdn.namepros.com/images/sidenav-bg2.jpg); padding: 0px; margin: 0px; float: left; height: 100%; } div#main { padding: 0px; margin-top: 0px; margin-left: 169px; width: 591px; } I didn't expect the "height: 100%" to work... but what should I be doing?! ????: NamePros.com http://www.namepros.com/programming/119830-div-stretch-nav-fit-height-content.html Thanks! __________________ www.headlinercreative.com

08-31-2005, 07:49 AM	#2 (permalink)
kpm547 NamePros Member Join Date: May 2005 Location: Canada Posts: 171	try min-height:100% That is supposed to work and probably will with FF, but EI Doesn't render it properly all the time. __________________ www.twocrazyducks.com - Two Crazy Ducks Web Hosting - Lethbridge, Alberta www.lasara.org - Lethbridge Area Search and Rescue themuellers.ca - The Mueller Family Webpage jobsitestructures.com - Job Site Structures Ltd. - for all your site office and accomodation needs!

08-31-2005, 11:38 AM	THREAD STARTER #3 (permalink)
TeviH NamePros Regular Join Date: Jul 2005 Location: Florida Posts: 233	doesn't work! So much for a pure css site... be a lot simpler to just use tables. So far, I'm not convinced I need to switch 100%...... CSS is great, but some things are just done better in regular html. __________________ www.headlinercreative.com

08-31-2005, 09:15 PM	THREAD STARTER #4 (permalink)
TeviH NamePros Regular Join Date: Jul 2005 Location: Florida Posts: 233	Ok, curious for people's opinions (yes, this is an old topic, but rather than read an article or a book, I want to see your opinions.)- I can do this page with CSS or HTML. HTML will require a table to set the layout, which is fairly compatible with every browser. Pure CSS - divs - to set the layout will require multiple divs, unnecessary divs, nested inside each other, all sorts of markup to make sure it displays correctly on all browsers....blahblahblha... Why would someone say to switch completely to CSS?! Sure I use CSS a lot to get the best out of my design, but why throw away something so simple and straightforward as HTML tables?! __________________ www.headlinercreative.com

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)