Div - Stretch the nav to fit height of content

[TeviH]

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:

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(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?!

Thanks!

 

[kpm547]

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]

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]

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?!