Forum Moderators: not2easy
I really need help with a particular variation on the div tag positioning problem.
I have a main container div that needs to contain a header, below that 3 columns and a footer. The footer needs to be at the bottom of the page all the time. The right column needs to stretch down to the footer at all times.
I cannot seem to get the columns to stay between the header and footer. whenever i set the frame containing the columns to 100% it squirts out below the footer and stretches the page down further.
the css that i have tried to date is as follows:
<style type="text/css">
.header
{
width: 770px;
height: 66px;
background: #288A90;
right:0px;
top: 0px;
}
.pageframe
{
width: 770px;
height: 100%;
background: #69ADB1;
position: relative;
}
.footer
{
height: 20px;
width: 770px;
BOTTOM: 0px;
right: 0px;
POSITION: absolute;
background: #e5e5e5;
}
<!-- body stuff -->
.frame
{
width: 770px;
height: 100%;
text-align: center;
background: 00ff00;
left: 0px;
top: 66px;
bottom-margin: relative;
position: absolute;
}
.leftnav
{
width: 160px;
height: 450px;
background: #00ffff;
float: left;
}
.rightnav
{
width: 154;
background: #B8E8EB;
height:100%;
float: left;
}
.center
{
width: 456px;
background: #5DD8DF;
height:100%;
float: left;
}
<!-- end body stuff -->
</style>
the html i am using is below:
<center>
<div class="pageframe"><!-- main container -->
<div class="header">
header
</div>
<div class="frame"><!-- body starts below -->
<div class="leftnav">
</div>
<div class="center">
</div>
<div class="rightnav">
</div>
</div><!-- end frame -->
<div class="footer">
2004 some company Inc. All rights reserved.
</div>
</div><!-- end main container -->
</center>
It is for an intranet so I only need this to work in IE.
Thanks
if it's for IE only then possibly the best way is to use an IE expression to calculate the height.. (JS will need to enabled, is it on your intranet?)
What happens is that because your header and footer have heights, 66px and 20px, by setting the height of the columns to 100% they are becoming 100% of the entire page and they're leaving room for the header and footer...so you're getting 100% + 86px. An IE expression will allow you to set the calculation where it finds the page (or another element) height and subtracts the 86px for you.
Compliant browsers do this very easily with absolute positioning co-ordinates, but because it's IE which doesn't support the full absolute positioning, using an expression is the only way I can think of. that along with floats and IE's ability to stretch the page should it become longer than 100%..
<style type="text/css" media="screen">
/* it is required that you set 100% on these before you start */
html, body {
margin: 0; padding: 0;
height: 100%;
text-align: center; /* quirky IE center */
}/* everything gets nested in the container so it can be centered, and the height is calculated from this div because it will allways be as tall as the longest column + header + footer */
#wrapper {
width: 770px;
height: 100%; /* this acts like min-height, it will stretch past this if it has to.. */
margin: 0 auto; /* strict center */
text-align: left; /* reset text alignment */
background: #69ADB1;
}/* the clear is in so the footer gets it */
#header, #footer {width: 100%; clear: both;}
#header {height: 66px; background: #e5e5e5; }
#footer {height: 20px; background: #288A90;}#left, #right, #content {
float: left;
height:expression(wrapper.offsetHeight - 86 + "px");
}#left {width: 160px; background: #0ff;}
#content {width: 456px; background: #5dd8df;}
#right {width: 154px; background: #b8e8eb;}<div id="wrapper">
<div id="header">header text</div>
<div id="left"><p>left content</p></div>
<div id="content"><h3>Main Content Area</h3></div>
<div id="right"><p>right content</p></div>
<div id="footer"><p>footer text</p></div>
</div>
in the expression:
the wrapper is the name of the container div (must be an ID and not a class)
86 is the sum of the header and footer heights
if this works for you I would advise you set them all up like this with ID's and do not apply any padding, border or margins to these divs, unless you're working in Quirks mode, in which case the measurements may need to changed slightly to allow for IE's box model..
give it a try, it may not be what you're after, but just shout..
Suzy
May I say something I am sure you have heard alot by now:
prefacing this with the fact that thanks to this current project I have I have gotten fairly good with CSS, but you are arguably the CCS LORD.
I bow before your stylistic power.
P.s. it worked hehe(in case you might not have figured that out lol).
Regular english thank you syntax is insufficient to express the depth of my gratitude..etc..etc
Sincerely
Adam
Is it possible to use that expression function with multiple nested div tags within the layout because so far when I have tried it crashed IE.
Adam
It can crash IE if the calculations you are trying to make are "circular", so yes a nested div that is a calculation of a calculation would do that..
however can't you just base all the calculations on the wrapper?.. (btw I also like maths, never though it would be handy though)
can you give an example of some of your required nested calculations?
Suzy
<added> or if you use quirks rendering mode, you can use percentage heights on your nested divs.. quirks might be easier anyway in an all IE situation?</added>
The two divs that are significant here are the #topcontent and lowercontent divs. The code below shows how i set this up but it crashes as previously mentioned. This issue is the last step towards my being able to complete this project.
<style type="text/css" media="screen">
<!--/* it is required that you set 100% on these before you start */ -->
html, body {
margin: 0; padding: 0;
height: 100%;
text-align: center; <!--/* quirky IE center */-->
}
<!--/* everything gets nested in the container so it can be centered, and the height is calculated from this div because it will allways be as tall as the longest column + header + footer */ -->
#wrapper {
width: 770px;
height: 100%; <!--/* this acts like min-height, it will stretch past this if it has to.. */ -->
margin: 0 auto; <!--/* strict center */ -->
text-align: left; <!--/* reset text alignment */ -->
background: #69ADB1;
}
<!--/* the clear is in so the footer gets it */ -->
#header, #footer {width: 100%; clear: both;}
#header {height: 66px; background: #e5e5e5; }
#footer {height: 20px; background: #288A90;}
#topcontent <!-- this content is a fixed height/width -->
{
position: relative;
height: 100px;
width: 456;
background: #87ADF3;
}
#lowercontent <!-- this must resize to fill up the rest of the content div in the center -->
{
width: 456;
height: expression(wrapper.offsetHeight - 186 + "px");
background: #AEC2E8;
}
#left, #right, #content {
float: left;
height:expression(wrapper.offsetHeight - 86 + "px");
}
#left {width: 160px; background: #0ff;}
#content {width: 456px; background: #5dd8df;}
#right {width: 154px; background: #b8e8eb;}
</style>
<div id="wrapper">
<div id="header">header text</div>
<div id="left"><p>left content</p></div>
<div id="content">
<h3>Main Content Area</h3>
<div id="topcontent"><!-- this is a fixed height -->
</div>
<div id="lowercontent"><!-- this needs to resize to the bottom of the page -->
</div>
</div>
<div id="right"><p>right content</p></div>
<div id="footer"><p>footer text</p></div>
</div>
there's nothing wrong with your logic, using the wrapper div - header - top content is fine...
I made up own code how I would've done it then looked at yours they were the same..
what was different was the HTML, that rogue <h3> nested in the content div that is neither in top content nor lower content.. sure enough when I put that in eh viola one IE crash!
so you should probably take it out and put in it topcontent or make a third container? I take it you won't need content that is neither in the top nor lower content areas?
Also, although fortunately becasue it's IE, your CSS comment tags should just be /* comment */ no need for <!-- HTML --> comments around them and you don't need the widths on lower and upper content as they are automatically taking their width from the #content div - you have then set @ 456 just now, which should have px on it too e.g. 456px.. but IE is very forgiving so if it's not bothered and you're not bothered neither am I :)
If there's still a problem ask away..
(see flattery really does get you everywhere ;))
Suzy
@>->--
cheesy ascii flowers since i dont have any real ones.
Thanks again
Adam
