1 reply [Last post]
Extranet Guy
Offline
newbie
Philadelphia, PA
Last seen: 16 years 3 days ago
Philadelphia, PA
Timezone: GMT-5
Joined: 2004-09-22
Posts: 1
Points: 0

I'm using a layout that started with the CSS Generator 3-column with header and footer). I want to have the page fill to a minimum of a full window (more if content demands) and am having trouble getting this to work on both IE and Firefox. On IE, it looks close (but the main body is 100%, when I want this to include the header and footer); plus it's a few pixels too wide. On Firefox, the width is fine, but the position of the footer is off (and the height). If anyone can see what I did wrong, I'd appreciate it!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" >
<style>
html, body{
margin:0;
padding:0;
height:100%;
}
#pagewidth{
width:100%;
min-width: 500px;
height:100%;
}
#header{
height:64px;
width:100%;
background-color:#00FF33;
}
#leftcol{
width:145px;
float:left;
position:relative;
margin-left:-145px;
margin-right:1px;
}
#outer{
border:solid white 0px;
/*/*/ border-left-width: 145px ; /* left column width. NN4 hack to hide borders */
border-left-color: #FFCC00; /* left column colour */
border-left-style: solid;
/*/*/ border-right-width: 145px; /* right column width. NN4 hack to hide borders */
border-right-color: #3366CC; /* right column colour */
border-right-style: solid;
background-color: #FFFFFF; /* center column colour */
width: auto;
height:100%;
}
#rightcol{
/*/*/ width:145px; /* hack keeps NN4 right column right? */
float:right;
position:relative;
margin-right:-145px;
margin-left:1px;
}
#footer{
height:13px;
width:100%;
background-color:#66CC00;
font-size:12px;
}
#inner{margin:0; width:100%; }
#maincol{
float: left;
width: 100%;
position: relative;
margin: 0 -8px 0 -2px;
}
#outer>#inner { border-bottom: 1px solid #FFFFFF; }
.clr{clear:both;}
.content{padding:5px;} /*padding for content */
#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/

/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#outer{border-left:0;}

/*hide the right column when printing*/
#rightcol{display:none;}
#outer{border-right:0;}
}
</style>
</head>
<body>
<div id="pagewidth" >
<div id="header" >
<div class="content"> Head </div>
</div>
<div id="outer" >
<div id="inner">
<div id="leftcol" >
<div class="content"> Left Column </div>
</div>
<div id="maincol" >
<div class="content">
Main Content
</div>
</div>
<div id="rightcol" >
Right Column
</div>
</div>

<div class="clr"></div>
<!-- close inner and outer -->
</div>
</div>
<div id="footer" >
<div class="content"> Footer </div>
</div>
<div class="clr"></div>
</div>
</body>
</html>

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 2 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

Trying to get layout to fill window

Your pages resize well, so I am not sure if I understand the problem correctly. On the footer issue, the only two things I can think of are:
1- Take out the final </div> since it has no associated starting tag.
2- Take out the height restriction from the footer class, or simply give it 100px or so.

With that it looks fine in IE6, W3C and Op. Hope this helps.