Forum Moderators: not2easy
Both divs are inside a containing div. The left nav floats left and the content div floats left against it. I floated the content div left here, instead of right, because of the problems which were caused by margins and padding in IE.
Some code extracts:
CSS
#nav {width: 168px; background: url(bg.gif) #fc3 repeat-y 0% 0%; margin-right: 25px; height: 100%; display: table;}
#template #contentSurround {height: 100%; display: table-cell;}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en">
<head>
<title>Test page</title>
<link rel="stylesheet" media="all" href="blah.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="template">
<div id="contentSurround">
<div id="header"></div>
<div id="nav">
Left Nav should stretch to 100%
</div>
<div id="container">
<div id="content">
Content
</div>
<div id="nav2">
nav2
</div>
</div>
</div><!-- /contentSurround -->
</div><!-- /template -->
</div><!-- /page -->
</body>
</html>
Fotiman
Your #nav is floated left. You're also trying to specify the height as 100%. However, it can only determine the height if it is explicitly set on it's parent. But floating the element takes it out of the flow, it can't calculate 100%.
Fotiman, thanks for that insight! Is the only way to fix this, changing the stucture to a table-layout?
I have another question regarding this layout. I need a footer at the bottom of the page, which stretches across the width of the page, but through the left nav. Easily done at the top of the page (for example background image lines set on the body tag, with margin-top), but how can this be achieved at the bottom of the page?
Apologies if this post is unclear, I'm not great with explaining things. Appreciate any help! Thanks.
Why do you need it to be 100% height? Is it for a background? You might want to look up 'faux columns'.
div.templateStill need to find a solution for the footer though.
Also does your page work in IE? I doubt it will as it doesn't support display table or table-cell properly.
The layout has since changed...
I have created a placeholder for the footer inside the template. And then added the footer after the page div with a negative margin-top. This ensures that the left nav background runs all the way down and the footer is 100% screen-width as opposed to 100% template-width. Makes sense?
To answer your question: Yes, layout works in both FF and IE now. I think I had to add
display: tabledisplay: table-cell
<div id="contentSurround">
<div id="header"></div>
<div id="nav">
Left Nav should stretch to 100%
</div>
<div id="container">
<div id="content">
Content
</div>
<div id="nav2">
nav2
</div>
</div>
<div id="footer"></div>
</div><!-- /contentSurround -->
Which is probably what you meant. You should be careful about using table/table-cell, if M$ decide to support it in the future, and in the spirit of IE, don't do it right, your page could break when a future browser is released.
Try to do it without these if you can. If you tell me what and where the areas are on the page I can probably mock up a CSS layout. Besides, I've been brushing up on my CSS and I need the practise!
