Hello,
For the past few years I've been more than happy to use HTML Tables for layouts - they're simple, easy to work with, and predictable in their resizing behaviour. I've read some articles on using DIV elements / CSS instead to completely seperate your style from your content. This seems like a great idea to me so I've been playing around with DIVs...and I've got stuck!
I've been trying to create a simple layout with a full width header / footer, and two columns sandwitched between for navigatation and content. I also want to achieve the following conditions:
1. I want to use a fully liquid layout with floated DIVs and percentage widths / heights where possible. There are a couple of elements that should maintain a fixed size (see below)
2. The page should resize in a predictable manner with no quirks i.e. Header / footer height should remain fixed, content should be hidden once there's no longer room to display it. The nav bar should hold it's width (this is the minimum size the page can reach) whilst the content shrinks down to nothing.
3. There should be no white space between any of the four areas.
4. The navigation bar should extend all the way down to the footer no matter what size of content is used.
5. Ideally I'd also like to centre all this in the middle of the browser window with excess space left blank (or as the body's background style). I'd like resizing to use up the blank space first and then start shrinking down the page content. I'm not exactly sure how to do this using tables so it's very much a "Stage 2" aim once I master the basics!
My first attempt has gone okay but I'm struggling to get the naviation bar to extend to the full height. I'm also having problem keeping everything together when the page gets really small - my content has a habit of zipping underneathe my navigation. My code is as follows:
<head runat="server">
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
}
#Nav {
width:200px;
height:100%;
background:#eaeaea;
float:left;
}
#Content {
width:auto;
background:#ffc;
float:left;
}
#header, #footer
{
background-color:blue;
height:30px;
}
</style>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="header">Test Header</div>
<div id="Nav">
<a href="#">Nav Link</a><br />
<a href="#">Nav Link</a><br />
<a href="#">Nav Link</a><br />
<a href="#">Nav Link</a><br />
<a href="#">Nav Link</a><br />
</div>
<div Id="Content">
<p>
(content here - deleted for this post)
</p>
</div>
<div style="clear:both;"></div>
<div id="footer">
footer
</div>
</form>
</body>