There were a number of considerations here. Firstly, the header has a very symmetrical look about it so it made sense to have the content in the middle of the screen. The problem then is "How wide do I make it?" Well, I have a 17" LCD monitor at a resolution of 1280x1024 (anything less looks awful on these cheapo monitors), but there are a lot of people in our organisation who, for some reason, run 800x600 even on 17" CRTs. So, taking into account that the interface itself is deliberately spartan, I plumped for an 800 pixel wide content area in the middle of the screen.
Naturally, I wanted to do this using divs rather than tables but the problem I found was that every 3 column layout I found used two fixed width outer containers and a fluid center column which was exactly the opposite of what I wanted. I also wanted a technique that was cross browser compatible. Eventually, after a lot of searching, I came accross a blog post by a chap called Alessandro who had done just what I wanted. As a result, I tried it out and sure enough it worked a treat in both IE and FireFox. I'm sure I'll be lambasted for it but I couldn't be bothered to check Opera et al, mainly because no one in the company uses it nor will they as access is through thin client and Citrix for most users, precluding the possibility of choosing their own browser. So, I thought I'd provide a practical example to go along side Alessandro's original concept code.
Here's the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="common800.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<!-- Place page header/branding in here -->
<div id="leftContainer">
<div id="padLeft"> </div>
</div>
<div id="leftText800">
<!-- Enter page contents in this container-->
</div>
<div id="rightContainer">
<div id="padRight"> </div>
</div>
</div>
</body>
</html>
And here's the css:
div#leftContainer
{
float:left;
margin-left:-400px;
width:50%;
}
div#padLeft
{
margin-left:400px;
}
div#leftText800
{
float:left;
width:800px;
}
div#rightContainer
{
float:right;
margin-left:-415px;
width:49.9%;
}
div#padRight
{
margin-left:415px;
}
No comments:
Post a Comment