Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Attach footer div element to the bottom of page but keep it below content area

Posted on 2009-04-15
9
681 Views
Last Modified: 2013-11-19
Hi there

Although this question has been asked a thousand times I just cant find a solution for the html/css layout i am working on.

I am working on css for a custom cms that I use, I need to keep the main sections (header, content, footer) html that it pumps out and use css to force the footer area to stay attached to the bottom of the page.

I have attached an html (remove .txt extension) file containing inline css and html file. The ideal result would mean:

1. The blue footer area streches to the bottom of the page.
2. The Purple inner footer is attached to the bottom of the blue footer area and therefore the bottom of the page
3.The purple inner footer will always sit below the red/green content area.

Any thoughts on this would be much appreciated as I just cant fix it.

Many thanks in advance

--s--
ee.html.txt
0
Comment
Question by:socross
  • 5
  • 3
9 Comments
 
LVL 12

Expert Comment

by:Dimitris
ID: 24147978
here u r
the height of 87px of the footer should not be exited.
Changes made on the #footer class of the CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Test</title>
		<style media="all" type="text/css">
/* Base Css */
:link, :visited {
	text-decoration:none;
}
ul, ol {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}
h1, h2, h3, h4, h5, h6, pre, code {
	font-size:1em;
}
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
	margin:0;
	padding:0;
}
a img, :link img, :visited img {
	border:medium none;
}
.cl {
	clear:both;
	font-size:0.1px;
	line-height:0.1px;
}
a:active, a:focus {
	outline: 0;
}
/* Main Css */
html {
	background:#FFF;
}
body {
	font-family:"Lucinda Grande",Sans-serif;
	color:#FFF;
	font-size:12px;
}
#header {
	background:#000;
	height:136px;
	width:100%;
}
#header div.inner {
	background:#0F0;
	height:136px;
	margin:0 auto;
	position:relative;
	width:880px;
}
 
#content {
	background:#FF0000;
	float:left;
	width:100%;
}
 
#content #pattern {
	background:transparent none repeat scroll 0 0;
	float:left;
	width:100%;
}
 
#content div.inner {
	background: #030;
	margin:0 auto;
	height:auto !important;
	min-height:200px;
	width:880px;
}
 
#footer {
	background: #09F;
	clear:both;
	padding:0;
	position:absolute;
	left:0px;
	top:100%;
	margin-top:-87px;
	height:87px;
}
 
#footer div.inner {
	background: #F0F;
	height:auto !important;
	margin:0 auto;
	height:87px;
	width:912px;
}
</style>
	</head>
	<body>
		<div id="header">
			<div class="inner">Header Inner
			</div>
		</div>
		<div id="content">
			<div id="pattern">
				<div class="inner">Content Inner
				</div>
			</div>
		</div>
		<div id="footer">
			<div class="inner">Footer Inner
			</div>
		</div>
	</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:socross
ID: 24148150
Hi dankangr

Thanks for your solution, but it does not seem to work for me. I was aiming for the purple inner-footer div to still be centered and attached to the bottom of the page with the blue footer container still 100% width and filling the space at the bottom of the page.

Many thanks

--s--
0
 
LVL 11

Expert Comment

by:level9wizard
ID: 24148245
Not sure if this is what you're looking for but I had a similar question some time ago:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24078315.html

I hope this helps!
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:socross
ID: 24148342
Thanks level9wizard

That was one of the tutorials i was using but I cant seem to apply it to this html/css layout.

It does exactly what i need but i cant my head round it!

Many thanks

--s--
0
 
LVL 12

Expert Comment

by:Dimitris
ID: 24150214
I think that this is what u want
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <title>Test</title>
                <style media="all" type="text/css">
/* Base Css */
:link, :visited {
        text-decoration:none;
}
ul, ol {
        list-style-image:none;
        list-style-position:outside;
        list-style-type:none;
}
h1, h2, h3, h4, h5, h6, pre, code {
        font-size:1em;
}
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
        margin:0;
        padding:0;
}
a img, :link img, :visited img {
        border:medium none;
}
.cl {
        clear:both;
        font-size:0.1px;
        line-height:0.1px;
}
a:active, a:focus {
        outline: 0;
}
/* Main Css */
html {
        background:#FFF;
}
body {
        font-family:"Lucinda Grande",Sans-serif;
        color:#FFF;
        font-size:12px;
}
#header {
        background:#000;
        height:136px;
        width:100%;
}
#header div.inner {
        background:#0F0;
        height:136px;
        margin:0 auto;
        position:relative;
        width:880px;
}
 
#content {
        background:#FF0000;
        float:left;
        width:100%;
}
 
#content #pattern {
        background:transparent none repeat scroll 0 0;
        float:left;
        width:100%;
}
 
#content div.inner {
        background: #030;
        margin:0 auto;
        height:auto !important;
        min-height:200px;
        width:880px;
}
 
#footer {
        background: #09F;
        clear:both;
        padding:0;
        position:absolute;
        left:0px;
        top:100%;
        margin-top:-87px;
        height:87px;
	width:100%;
}
 
#footer div.inner {
        background: #F0F;
        
        margin:0 auto;
        height:100%;
        width:912px;
}
</style>
        </head>
        <body>
                <div id="header">
                        <div class="inner">Header Inner
                        </div>
                </div>
                <div id="content">
                        <div id="pattern">
                                <div class="inner">Content Inner
                                </div>
                        </div>
                </div>
                <div id="footer">
                        <div class="inner">Footer Inner
                        </div>
                </div>
        </body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:socross
ID: 24150402
Thanks dankangr

Nearly there but not quite.

1. The blue footer section needs to expand to fill the space between the content div and bottom of the page.

2. The footer div needs to stay below the content div at all times.

Sorry to be such a pain.

Many thanks

--s--
0
 
LVL 12

Expert Comment

by:Dimitris
ID: 24152324
the problem that we can't set the footer div (blue) to get the remain of the page is due to the declaration of
<!DOCTYPE html PUBLICs "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/TR/xhtml1/
So whatI suggest is to add a background color of the body the blue and live the rest as is.
But if you don't have any color on the blue footer div then you will not have any problem because it will grow and shrink based on the contents of the footer div(pink).

I have tried an other way also to add a table with width and height 100% but the doctype declaration doesn't allow the object to grow in order to cover the entire page.

 
0
 
LVL 12

Expert Comment

by:Dimitris
ID: 24152381
also have a look here
even the the xhtml V 1.1 doesn't allow for a div to get the 100% of the body
http://www.w3.org/QA/2002/04/valid-dtd-list.html
0
 
LVL 12

Accepted Solution

by:
Dimitris earned 500 total points
ID: 24152410
what seems to work is the
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hide cell in a table 2 27
I want a tab to always be underlined when I open div then change 1 34
VBScript on Html 15 47
return false must be hit after calling certain command 10 33
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

837 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question