Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
div.mainNav {
text-align: right;
}
-->
</style>
</head>
<body>
<div id="topHeader" style="position:absolute; left:32px; top:28px; width:608px; height:196px; z-index:1; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px none #000000;">big image takes up all of this div
<div id="mainNav" class="mainNav" style="position:relative; left:60px; top:140px; width:513px; height:21px; z-index:2; background-color: #CCFFCC; layer-background-color: #CCFFCC; border: 1px none #000000;">navigation goes here </div>
</div>
<div id="Layer1" style="position:absolute; left:32px; top:238px; width:239px; height:128px; z-index:2; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000;">This div is supposed to contain a photo no text should be below the photo or flow around it </div>
<div id="Layer2" style="position:absolute; left:284px; top:239px; width:356px; height:271px; z-index:3; background-color: #FFCCCC; layer-background-color: #FFCCCC; border: 1px none #000000;">This div is supposed to contain the text </div>
<div id="Layer3" style="position:absolute; left:35px; top:512px; width:605px; height:22px; z-index:4; background-color: #CCCCFF; layer-background-color: #CCCCFF; border: 1px none #000000;">this div is the footer and is supposed to contain navigation and always be at the bottom of the page, not bottom of window </div>
</body>
</html>
You should work with CSS positioning.
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
position: absolute;
Something with that CSS will take up 100% of the viewable space. Set the position to relative and it will take up 100% of whatever object/element it is encased within.
There are still some minor and VERY annoying issues with the bottom of browsers. I can't seem to get a 0px or 10px margin from the very bottom in all of the browsers (Gecko, IE, and Opera ) at the same time. But you defintly don't want to specify your fotter from the top.
I suggest waiting for someone else more exerpeienced with DIVs. I don't use DIVs as much as I could only because IE and Opera still render the borders as PART OF THEIR WIDTH and thus since I do precision placement of tables on my site I need something w3 complaint on all 3 browsers.
Basically I set a "container" to hold the entire page. It has automatic margins so it is centered. The photo and text box are floats, contained inside another float so they will "push" the box down and not float outside. Those are cleared and the footer is placed on the bottom. The footer will always be at the bottom of the "container" which will grow to suit the page length.
Jimmy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#page {
width: 610px;
margin: 0 auto;
border: solid 1px #000;
padding: 3px;
}
#topheader {
width: 608px;
height: 196px;
margin: 0 auto;
background-color: #cff;
border: solid 1px #000;
}
#mainnav {
width: 513px;
height: 21px;
margin: -50px auto 0;
background-color: #cfc;
border: solid 1px #000;
}
#contain {
float: left:
margin-top: 50px;
}
#layer1 {
float: left;
width: 239px;
height: 128px;
margin-top: 30px;
background-color: #ffc;
border: solid 1px #000;
}
#layer2 {
float: right;
width: 356px;
height: 271px;
margin-top: 30px;
margin-bottom: 5px;
background-color: #fcc;
border: solid 1px #000;
}
#layer3 {
width: 605px;
height: 40px;
margin-top: 20px
margin-left: auto;
background-color: #ccf;
border: solid 1px #000;
padding: 2px;
clear: both;
}
.rghtalign {
text-align: right;
}
//-->
</style>
</head>
<body>
<div id="page">
<div id="topheader">big image takes up all of this div</div>
<div id="mainnav" class="rghtalign">navigation goes here </div>
<div id="contain">
<div id="layer1">This div is supposed to contain a photo no text should be below the photo or flow around it </div>
<div id="layer2">This div is supposed to contain the text </div>
</div>
<div id="layer3">this div is the footer and is supposed to contain navigation and always be at the bottom of the page, not bottom of window </div>
</div>
</body>
</html>
Jimmy
What you can do is expand the page down to fill the screen, you'll just to decide how far down. If you size it for an 800x600, then it will be short at 1024x768, or way long at 640x480. I think most design for an 800x600 if using a fixed size.
So I reworked the script and added the minimum height feature. It is set at 540px right now, plus the footer. About right for 800x600. Set it to a low value to disable the minimum height feature and the page will shrink down to either the photo or text box, whichever is longest. I commented it in the script so you can adjust it. I also removed the height on the text and footers. Now they will fit whatever text you use automatically without having to change the height when you change text. It actually turned out to be a nice little page template to build on. And other than the floats the whole page is done without any positioning. Just make any minor adjustments with the margins, it's not quite "perfect" yet.
Here's a copy of the revised script. You can save all the styling into a style sheet, then use it with multiple pages.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#page {
width: 615px;
min-height: 540px;
margin: 0 auto;
border: solid 1px #000;
padding: 3px;
background-color: #eee;
}
#topheader {
width: 608px;
height: 196px;
margin: 0 auto;
background-color: #cff;
border: solid 1px #000;
}
#mainnav {
width: 513px;
height: 21px;
margin: -50px auto 0;
background-color: #cfc;
border: solid 1px #000;
}
#contain {
float: left:
margin-top: 50px;
}
#photo {
float: left;
width: 239px;
height: 128px;
margin-left: 2px;
margin-top: 30px;
background-color: #ffc;
border: solid 1px #000;
}
#text {
float: right;
width: 350px;
margin-top: 30px;
margin-right: 2px;
margin-bottom: 5px;
padding: 0 4px;
background-color: #fcc;
border: solid 1px #000;
}
#footer {
width: 605px;
margin-top: 20px
margin: 0 auto;
background-color: #ccf;
border: solid 1px #000;
padding: 4px;
clear: both;
}
#scrn {
height: 540px; /* -- -- set minimum page height here -- -- */
float: right;
width: 1px;
}
.cntr {
text-align: center;
}
.rghtalign {
text-align: right;
}
//-->
</style>
</head>
<body>
<div id="page">
<div id="scrn"></div>
<div id="topheader"><h1 class="cntr">Big image</h1></div>
<div id="mainnav" class="cntr">Navigation Bar Here </div>
<div id="contain">
<div id="photo"><h1 class="cntr">Photo</h1></div>
<div id="text"><p>This text box has no height specified. It will expand or shrink to fit the text.</p
<p style="font-size: .8em;">IE doesn't support the min-height rule. Rather than using it and applying a bunch of hacks we can take an easier route. We float a 1px wide division down the right side of the page, with a specified height. The footer div at the bottom already clears all the floats, so we're set. The new 1px float can push down against the footer to maintain our minimum height. We get our minimum height setting that will work in all browsers as far as I know, and we only had to add some styling for another division. No hacks needed. The only drawback, in IE, the right border space will be 1px wider than the left side.</p>
</div>
</div>
<div id="footer">Footer - This box will expand to hold more than one line.</div>
</div>
</body>
</html>
