Log in

View Full Version : CSS Div Footer Layout Question


dghosh2602
07-23-2008, 12:55 PM
Hello,

I am trying to place 3 divs on a page: header, content, footer. I need the header to be always seen across page scrolls. I want content start after header and footer to start after content as normally expected. Content are must be fluid, in the sense that it shouldn't have a height specified. It should depend on the content placed in it and the footer needs to have a height.

I got the header and content parts behaving as I expect but I am messing up the footer. I can't seem to make it follow the content automatically.

Below is my code:

HTML:



<body>
<div id="header">
<div class="innertube">
<xsl:apply-templates select="header" />
</div>
</div>


<div id="content">
<div class="innertube">
<xsl:apply-templates select="content" />
</div>
</div>

<div id="footer">
<div class="innertube">
<xsl:apply-templates select="footer" />
</div>
</div>
</body>


CSS:



body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#header {
/***** Always Visible *****/
position: absolute;

top: 0;
left: 0;
width: 100%;

/***** Height Of Frame Div *****/
height: 58px;
background: url(../images/header_bg1.png) repeat-x;

/***** Disable scrollbars. Set to "scroll" to enable *****/
overflow: none;

/***** Shiny Silver *****/
background-color: #3A4046;

color: #FFFFFF;
}


#content {
position: fixed;

/***** Set this value, equal to the height of the header frame *****/
top: 58px;

left: 0;
right: 0;
bottom: 0;
overflow: auto;
padding: 10px 10px 10px 10px;
background: #FFFFFF;
}

#footer {
background: url(../images/footer1.png) repeat-x;
padding: 10px 10px 10px 10px;
color: white;
height: 49px;
width: 100%;
}



Please help,

Thanks a lot!
TheJoshMan
07-23-2008, 10:38 PM
<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#header {
/***** Always Visible *****/
position: absolute;

top: 0;
left: 0;
width: 100%;

/***** Height Of Frame Div *****/
height: 58px;
background: #ff0000;

/***** Disable scrollbars. Set to "scroll" to enable *****/
overflow: none;

/***** Shiny Silver *****/


color: #FFFFFF;
}


#content {
position: absolute;

/***** Set this value, equal to the height of the header frame *****/
top: 58px;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
padding: 10px 10px 10px 10px;
background: #000000;
}

#footer {
background: green;
position: absolute;
left: 0px;
bottom: 0px;
padding: 10px 10px 10px 10px;
color: white;
height: 49px;
width: 100%;
}
</style>
</HEAD>

<body>
<div id="header">
<div class="innertube">
<xsl:apply-templates select="header" />
<h1 style="text-align:center; margin-top:8px;">This is the header...</h1>
</div>
</div>


<div id="content">
<div class="innertube">
<xsl:apply-templates select="content" />
<h1 style="text-align:center; font-size:4em; color:red; margin-top:15%;">This is the Content DIV...</h1>
</div>
</div>

<div id="footer">
<div class="innertube">
<xsl:apply-templates select="footer" />
<h1 style="text-align:center; margin-top:16px; color:black;">This is the footer...</h1>
</div>
</div>
</body>
</HTML>


1935
Medyman
07-24-2008, 12:58 AM
@Nyne Lyves...
That will only work if the viewport is capped at 100%. The OP specifically mentioned that the content div needs to be fluid in height.

@dghosh...
What you're after has a very simple fix. First, apply fixed positioning to the header and set an explicit height. Next, add a top-margin to the content div in the amount of the height of the header.

So, your CSS would look something like this:

#header {
position:fixed;
top:0;
height:70px;
}
#content {
margin-top:70px; /* Height of Header */
}

In a page, it'll look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#header {
position:fixed;
top:0;
height:70px;
}
#content {
margin-top:70px; /* Height of Header */
}

/* Stylistic Purposes, Ignore */
html,body { margin:0; padding:0; text-transform:uppercase; }
h1 { margin:0; padding:10px; font:bold 15px Arial; color:#333; }
#header { background:#eee; width:100%; }
#content { height:1000px; }
#footer { background:#eee; width:100%; height:70px; }
</style>
</head>
<body>

<div id="header"><h1>Header</h1></div>
<div id="content"><h1>Content</h1></div>
<div id="footer"><h1>Footer</h1></div>

</body>
</html>
dghosh2602
07-24-2008, 02:24 AM
@Nyne Lyves...
That will only work if the viewport is capped at 100%. The OP specifically mentioned that the content div needs to be fluid in height.

@dghosh...
What you're after has a very simple fix. First, apply fixed positioning to the header and set an explicit height. Next, add a top-margin to the content div in the amount of the height of the header.

So, your CSS would look something like this:

#header {
position:fixed;
top:0;
height:70px;
}
#content {
margin-top:70px; /* Height of Header */
}

In a page, it'll look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#header {
position:fixed;
top:0;
height:70px;
}
#content {
margin-top:70px; /* Height of Header */
}

/* Stylistic Purposes, Ignore */
html,body { margin:0; padding:0; text-transform:uppercase; }
h1 { margin:0; padding:10px; font:bold 15px Arial; color:#333; }
#header { background:#eee; width:100%; }
#content { height:1000px; }
#footer { background:#eee; width:100%; height:70px; }
</style>
</head>
<body>

<div id="header"><h1>Header</h1></div>
<div id="content"><h1>Content</h1></div>
<div id="footer"><h1>Footer</h1></div>

</body>
</html>

That is exactly what I was looking for! Yes you are right, that was a very simple and obvious fix. I guess I wasn't thinking in that direction.

Thanks a lot,
I appreciate your time