Learn VBA & Macros in 1 Week!

CSS - V. Simple Problem I Hope - Positioning Footer

Full Excel VBA Course - Beginner to Expert

V. Simple Problem I Hope - Positioning Footer	View Content

Hi all,

Basically I want to position a footer at the very bottom of my page which is 100% in width. So far I have:

Code:

.linkbar {
	display:block;
	background-color:black;
	position:absolute;
	height:100px;
	width:100%;
	bottom:0px;
	left:0px;
}

.picturebox {
	display:block;
	background-color:blue;
	position:absolute;
	height:50px;
	width:50px;
	bottom:0px;	
	left:0px;
}

This is what I have so far and I geta reasonable result in IE but nothing at all in firefox, the box doesn't even appear.

Any help would be greatly appreciated!

Regards,
Jack.

Full Excel VBA Course - Beginner to Expert

Simple Footer Positioning Problem

Similar Tutorials

View Content

Hi -
I've got an issue with the positioning on my footer - It displays at the top of the page (underneath the top content and stuff) when I want it to display at the end of my main DIV - #wrapper.

here's my css:
Code:

/* WRAPPER corresponds to the container that surrounds all the content (navigation, text, etc.) */
#wrapper {
	position: absolute;
	width: 768px;
	left: 0px;
	top: 0px;
	background-color: #FFFFFF;
	}

/*BEGIN content elements (display within the wrapper - in theory) */
.inner_header {
	position: absolute;
	top: 4px;
	width: 565px;
	}

.inner_content {
	position: relative;
	top: 126px;
	left: 189px;
	width: 515px;
	}

.inner_headline {
	position: absolute;
	top: 94px;
	left: 189px;
	width: 350px;
	font-family: verdana;
	font-size: 11pt;
	font-weight: bold;
	color: #000066;
	}
	
.inner_top_right {
	position: absolute;
	left: 565px;
	top: 4px;
	width: 203px;
	}

.inner_searchbox {
	position: absolute;
	top: 250px;
	left: 7px;
	width: 166px;
	}

.inner_topbar {
	position: absolute;
	width: 768px;
	height: 4px;
	background-color: #1f295c;
	}
/*END content */

/* HERE's the part I want to display at the END of all other loaded content. */
#footer {
	width: 768px;
	margin-top: 0px;
	}

Here's the HTML:
Code:

<div id="wrapper">

<div class="nav">
    <?php include "nav.php"; ?>
</div>

<div class="landing_page">
	<?php include "land.php"; ?>
</div>

<h1><?php echo $message; ?></h1>

<div class="header">
   <?php include "header.php"; ?>
</div>

<div class="searchbox">
   <?php include "searchbox.php"; ?>
</div>

<div class="featured_jobs">
   <?php include "featjobs.php" ?>
</div>

</div> <!--close the wrapper-->

<div id="footer">
  <?php include "footer.php"; ?>
</div>

Thank you in advance for considering my question.

-Taylor

Css Positioning - Footer Positioning Problem

Similar Tutorials

View Content

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!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">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Simple Header+content+footer Height Problem

Similar Tutorials

View Content

I want to do this design:
http://hermann.sonyextreme.com/upload/design.png
* means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px.

I've set it up like this:
Code:

<div id="container">
  <div id="header">
  </div>
  <div id="main">
    <div id="menu">
    </div>
    <div id="content">
    </div>
  </div>
  <div id="footer">
  </div>
</div>

But no matter what I try, the css just keeps ****ing with me
So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you

Thanks in advance
Hermann

Footer Positioning

Similar Tutorials

View Content

Hello everyone! First time poster here!

I am having trouble getting a footer to position itself at the bottom of the page. I have tried to use the "bottom: 0;" and it pushes it to the bottom of the screen, but does not give the footer a static position in the page.

Here is my css file:
Code:

body {
	margin: 16px 0 0 35px;
	padding: 0;
	background: fixed #738b41 url(../images/bk.jpg) no-repeat left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}

h1, h2 {
	font-weight: bold;
	color: #FFFFFF;
}

h1 {
	margin: 0 20px 0 20px;
	font-size: 150%;
}

h2 {
	margin: 15px 20px 10px 0;
	font-size: 125%;
}

p {
	margin: 20px;
	text-align: left;
	text-indent: 0;
}

img {
	border: none;
	margin: 0 auto;
}

img.left {
	float: left;
	margin: 0 auto;
	padding: 0 25px;
}

img.right {
	float: right;
	margin: 0 auto;
	padding: 0 15px 0 5px;
}

img .left1 {
	float: left;
	margin: 0 auto;
	padding: 10px 0 0 0;
}

img .right1 {
	float: right;
	margin: 0 auto;
	padding: 10px 0 0 0;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 0;
}

/* Header */

#header {
	clear: both;
	width: 960px;
	margin: 0 auto;
	padding: 0;
}

#logo {
	width: 215px;
	height: 215px;
	margin: 0 auto;
	float: left;
}

#social {
	width: 300px;
	height: 150px;
	margin: 0 auto;
	float: right;
}

#social .facebook {
	width: 110px;
	height: 150px;
	margin: 30px 0;
	float: left;
}

#social .twitter {
	width: 128px;
	height: 150px;
	margin: 25px 25px 0 0;
	float: right;
}

#menu {
	width: 675px;
	height: 65px;
	margin: 10px 0;
	float: right;
	background: url(../images/menu.png) no-repeat;
}

#menu ul {
	margin: 0;
	padding: 0 25px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin: 0 auto;
	padding: 20px 20px 0 20px;
	text-decoration: none;
	font-weight: bold;
	font-size: 110%;
	color: #c8d8a7;
}

#menu a:hover {
	background: url(../images/barn.png) no-repeat left 105%;
}

#content {
	width: 960px;
	margin: 0 auto;
	padding: 22px 0;
	background: url(../images/content_top.png) top left no-repeat;
	clear: both;
}

#main {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	background: url(../images/content_middle.png) left repeat-y;
}

#main .textarea {
	width: 605px;
	margin: 0 auto;
	padding: 5px 0;
	float: left;
}

#main .sidebar {
	width: 345px;
	margin: 0 auto;
	padding: 0 5px 15px 0;
	float: right;
}

#main .sidebar .lower {
	margin: 0 12px 0 0;
	padding: 10px 0 10px 30px;
	background: url(../images/side-bar-bk.png) top right no-repeat;
	position: relative;
	clear: both;
}

#footer {
	padding: 0 10px 0 10px;
}

#footer p {
	font-size: 10px;
	color: #FFFFF;
}

#footer .copyright {
	float: left;
}

#footer .crosspoint {
	float: right;
}

I know this is probably something very simple, but I have stared at it so long that I need a fresh set of eyes. In case you need it, here is the HTML as well:
Code:

<html>
<head> 
<title></title>  
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="" /> 
<meta name="description" content=""/> 
<meta name="category" content="Agriculture"/> 
<meta name="rating" content="General"/> 
<meta name="GOOGLEBOT" content="INDEX, FOLLOW"/> 
<meta name="ROBOTS" content="INDEX, FOLLOW"/> 
<meta name="revist-after" content="15 days"/> 
<meta name="author" content="Crosspoint Creative Marketing, LLC"/> 
<link href="css/default2.css" rel="stylesheet" type="text/css"/> 
</head>
<body> 
	<div id="header">
		<div id="logo">
			<a href="#"><img src="images/logo.png" alt="Blake Dairy Farms: Knoxville's Corn Maze Destination!"/></a>
		</div>
		<div id="social">
			<div class="facebook">
				<a href="" title="Connect with our Corn Maze crew on Facebook"> 
				<img src="images/fb.png" alt="Like us on Facebook!" /></a>
			</div>
			<div class="twitter">
				<a href="" title="Help promote our Corn Maze on Twitter!"> 
				<img src="images/twitter.png" alt="Connect with us on Twitter!" /></a>
			</div>
		</div>	
		<div id="menu">
			<ul>
				<li class="a"><a href="#">Home</a></li>
				<li><a href="the-farm.html">The Farm</a></li>
				<li><a href="our-corn-maze.html">Our Corn Maze</a></li>
				<li><a href="about-the-blakes.html">About the Blakes</a></li>
				<li><a href="contact-us.html">Contact Us</a></li>
			</ul>
		</div>
	</div>
	<div id="content">
		<div id="main">
			<div class="textarea">
				<h1>Welcome to Blake Dairy Farms online!</h1>
				<p><img src="images/blake-dairy-farms.jpg" alt="Blake Dairy Farms" class="right" />
				Thank you for visiting our site! We look forward to connecting with you and hope to be your 
				choice for agritourism in Knox county.</p>
				<p>Blake Dairy is a first generation farm located in beautiful Strawberry Plains, TN just an hour 
				away from the Smokey Mountains. We have been in business for over ten years and have been very 
				blessed with growth we have seen during that time.</p>
				<p>Have a look around our website. We have a blog that we try to keep updated to let 
				you all know what is going on here at the Dairy. We are also on Facebook and Twitter so be sure 
				to connect with us there as well!</p>
				<p>If you live here in Knox county, be sure to keep up with our Corn Maze and Farm Festival this 
				September and October. We are putting together a fun and educational event that you can bring the 
				whole family out to and spend the entire day. Check out our Corn Maze Page for more information 
				and dates. If you would like to learn more about our operation here, don't hesitate to contact us!</p>
				<a href=""><img src="images/dairy-farmers-of-america.png"
				alt="Dairy Farmers of America" class="left" /></a>
				<img src="images/thanks-knoxville.png" alt="Thanks for checking out our Corn Maze!" class="right" />
			</div>
			<div class="sidebar">
				<img src="images/dairy-farm.png" alt="Blake Dairy Farm: Knox County's Fall Festival and Corn Maze Destination" class="right" />
				<div class="lower">
					<h2>Our Corn Maze Sponsors:</h2>
					<a href="" title="Corn Maze Sponsor: Crosspoint Creative Marketing">
					<img src="images/crosspoint-creative-marketing.png" alt="Crosspoint Creative: Corn Maze Sponsor" class="left1" /></a>
					<img src="images/knox-farmers-co-op.png" alt="Knox Farmer's CO-OP: Corn Maze Sponsor" class="right1" />
					<p>Be sure to visit their websites! They have helped to make this event possible.</p>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
		<p>Testing</p>
	</div>
</body>
</html>

Thanks for taking a look and I appreciate any help whatsoever!

Help With Footer Positioning...

Similar Tutorials

View Content

Ok, I have this page where the footer <div> isn't paying attention
to where the menu <div>'s are.

If you look -> Here, you will see how the site is meant to look, i.e.
the footer is below everything else.

But, if you look -> here, you will see that if the contents of the main
<div> are shorter than the menu ones, the footer follows it up
the page, and goes underneath the two menu divs.

Both menu's are absolutely positioned, so I don't really know how
to get the footer to notice they are there, and position itself
accordingly... Any thoughts anyone?

Cheers,
Jon.

Footer Positioning

Similar Tutorials

View Content

Is there a way to get a footer always to appear at the bottom of the browser window? Instead of just appearing under however much content is showing above it?

please?

Css Footer Positioning

Similar Tutorials

View Content

Hi
I've been coding amateur websites and PHP applications for years, but I recently decided to try and learn how to design a website professionally - that is, using Photoshop to mock it up and create a logo, and holding the contents in place using CSS.

I'm very pleased with the result (which can be found at haruhi.kg13.com), but there is one bug that I've been trying in vain to resolve, and that is the footer. It took a while to make the footer stay in place, and now it permanently stays on top of any content, which is obviously an issue where I intend to be creating rather long pages without the use of iFrames or any other page-within-a-page technique.

Essentially, what I want is for my footer to stay at the bottom of the page (not the browser window) with a 15px margin above it so that I can display as much text as I like on any given page. It's best displayed on the "legal" page, if you increase the font size a bit.

Here is my source code. I know some of the CSS elements look unnecessary; I've tried several tutorials for this problem, and this one told me to add a lot of CSS classes.

CSS:
Code:
main.css

@charset "utf-8";
/* CSS Document */

body {
	font: 9pt/17pt arial;
	margin:0;padding:0;
	height:100%;
	background-image: url(../img/sitebg.gif);
	background-repeat: repeat-x;
	background-color: #dbe4f7;
	margin-bottom:10px;
}

#clear {
	clear:both;
}

p {
	font-size:14px;
}
a {
	color:#FFFFFF;
}

#content {
	position:fixed;
	margin-left:200px;
	margin-right:200px;
	/* margin-bottom:30px; */
	margin-top:20px;
	line-height:25px;
    min-height: 100%;
    margin-bottom: -36px;
}
* html #content {
    height: 100%;
}

#content p {
	text-align:right;
	font: 12pt/14pt arial;	
}

#content a:link {
	display:inline;
	color:#0094FF;
	text-decoration:none;
}
#content a:hover{
	display:inline;
	background:#004A7F;
	text-decoration:none;
}

#header_contain {
	width:935px;
	height:111px;
	background-position:bottom;
	display:block;
	margin:0 auto;
}

#header_contain p.logo {
	display:inline;
	width:339px;
	height:111px;
	text-indent:-5000px;
	float:right;
	background-image: url(../img/logo.png);
}

#header_contain p.logo a {
	display:inline;
	width:339px;
	height:111px;
	text-indent:-5000px;
	float:right;
	background-image: url(../img/logo.png);
}

ul#top_header {
	font-size:18px;
	list-style-type:none;
	float:right;
	margin:0;padding:0;
	clear:right;
	margin-top:-60px;
	margin-right:180px;
}

ul#top_header li {
	float:left;
	margin-right:50px;
}

ul#top_header li a {
	display:block;
	color:#FFFFFF;
	text-decoration:none;
}

ul#bottom_header {
	list-style-type:none;
	float:right;
	margin:0;padding:0;
	clear:right;
	margin-top:17px;
}

ul#bottom_header li {
	float: left;
	margin-right: 15px;
}

ul#bottom_header li a {
	display:block;
	font-size:14px;
	text-decoration:none;
}

#footer-spacer {
    height: 36px;
}

#footer {
	display:block;
	position:absolute;
	bottom:0;
	width: 100%;
	background:#c3cdda;
	height:36px;
}

ul#bottom_footer {
	list-style-type:none;
	float:right;
	margin:0;padding:0;
	clear:both;
	margin-top:8px
}

ul#bottom_footer li {
	float:left;
	margin-right: 15px;
}

ul#bottom_footer li a {
	display:block;
	font-size:18px;
	text-decoration:none;
	bottom:15px;
}

#top {
    position: absolute;
}

HTML (ignore the .php file extension, I'm generating content using includes)
Code:
index.php

    
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    
	<title>KieranJones.org | Home</title>
    
</head>

<body>
<div id="top"></div>
<div id="header_contain">
    	<p class="logo"><a href="index.php">KieranJones.org</a></p>
    	<ul id="top_header">
    		<li><a href="index.php?action=blog">Blog</a></li>
        	<li><a href="index.php?action=portfolio">Portfolio</a></li>
        	<li><a href="index.php?action=contact">Contact</a></li>
        </ul>
    </div>
    
<div id="content">
	<?PHP include("action.php"); ?>
	<div id="footer-spacer"></div> 
</div>
    
	<div id="footer">
        <ul id="bottom_footer">
        	<li><a href="index.php?action=advertising">Advertising</a></li>
        	<li><a href="index.php?action=legal">Legal</a></li>
        </ul>
    </div>

</body>

</html>

Thanks
Kieran

Css Footer Positioning

Similar Tutorials

View Content

Hi there,

I was wondering if someone could help me a with a problem with my footer positioning. I'm building my website he

thecoastguard.co.uk

My footer is sitting to the right of the sidebar. I want it to be centered. The current CSS is:

#footer {float:left; border-top: 1px solid #cccccc; padding: 0; margin: 20px 0 0 0; clear:both; width: 850px;}
#footer p {margin: 0; padding: 5px 10px; text-align: center;}

I've tried changing the float to right. That works in firefox but not in IE. Center float does nothing at all.

any advice would be much appreciated.

Thanks!
Siobhan

Css Positioning A Footer - Help Needed.

Similar Tutorials

View Content

Hello ppl,

the problem I got is the following:

I have a set of pages consisting of a header a main content and a footer. I made the footer displaying at the bottom of the page even if the page is empty by the help of the following post: http://forums.devshed.com/showthrea...39&page=1&pp=15

The problem I have now is:

in the css file I do not define the variable width for the header and it gets displayed like I would expect it if I said width=100%. Now if I do not define the width of the footer it is really small. If I define it like width=100% it looks ok in IE and like 102% in mozillabased browsers.

Now I do not want to talk about IE vs. Mozilla issues, I just want to know why defining no width for the header works but not for the footer.

here is a link to my page where footer has a width=100% : www.ovidius-journeys.de/index.html and the link to the coresponding css file is www.ovidius-journeys.de/tierraverde-screen.css

here is a link to a test page where footer is lacking a width definition: www.ovidius-journeys.de/test.html and the coresponding css file is www.ovidius-journeys.de/test.css

Please remember to test both url with IE and Mozilla to see the difference.

I am seriously determined to fix this misbehaviour. THerefore I made a small drawing to illustrate things: www.ovidius-journeys.de/images/diagramm.jpg
There is a hotlink protection active, I managed to bypass it a little but you still have to copy the url into a new browser window, meaning only referers from my domain are allowed but entering the url manually without sending a referer will work.
The drawing shows how my pages are structured. I also added some atributes from the css file as far as I thought them relevant for this problem.

Footer Positioning Issue

Similar Tutorials

View Content

I've got a pretty basic layout:
Code:

<div id="wrapper">
   <div id="LeftBar"></div>
   <div id="Header"></div>
   <div id="MainContentPane">
   </div>
   <div id="Footer"></div>
</div>

The Footer runs the full width of the page. The Leftbar runs from the top of the page to the top of the Footer. The header runs from the right side of the Leftbar to the width of the wrapper. The MainContentPane runs from the right side of the Leftbar, bottom of the Header to the top of the Footer.
The Leftbar contains a vertical graphic as a background and it does not contain any other content.

I'm trying to figure out how to make the Footer sit tight to the bottom of what ever content is in the MainContentPane section and have the Leftbar not show below the Footer if the MainContentPane is vertically smaller then the background image in the Leftbar.

The look of the page is pretty straight forward and common so if my explanation is confusing I apologize.

TIA

Footer Positioning At Bottom

Similar Tutorials

View Content

Hi!

i'm trying to position footer at the very bottom.
this example does it as expected (if the page is longer than viewport, footer will be at the end of page):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<style type="text/css">
        <!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#content {
				padding: 10px;
				background-color: #ff8080;
			}
			#footer {
				position: absolute;  /* Needed for Safari */
				padding: 10px;
				background-color: #aa3939;
				width: 75%;
			}
			#footer h1 {
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script></head><body>
		<div id="content">
			<h1>Content</h1>
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		</div>
		<div style="position: absolute; top: 810px;" id="footer">
			<h1>Footer</h1>
		</div>
	</body></html>

but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<style type="text/css">
        		<!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#head
			{
				padding-left:20px;
				padding-top:20px;
				padding-right:20px;
				background-color: #FFF;
				background-image: url('/public/images/header-background.gif');
				background-repeat: repeat-x;
				background-position: bottom
			}
			#logo
			{
				height: 100px;
				background-image: url('/public/images/header.jpg');
				background-repeat: no-repeat
			}
			#content
			{
			}
			#leftcontent
			{
				float:left;
				width:67%;
				margin:10px;
				padding:30px 30px 70px 30px;
				border: 1px solid #000;
				background-color: #33251C
			}
			#leftcontent h1
			{
				color: #936FC4
			}
			#leftcontent h2
			{
				color: #FFF
			}
			#rightcontent
			{
				margin:15px
			}
			p, pre
			{
				margin:0px 30px 10px 30px
			}
			#rightcontent p
			{
				font-size:10px;
				margin-left:0px
			}
			#navcontainer
			{
				margin: 0;
				padding: 0;
				height: 22px;
				font: 11px Verdana, sans-serif;
				width: 100%;
				border-top: 1px solid #bbb;
				border-bottom: 1px solid #bbb;
				list-style-type: none;
				background: #FFF
			}
			#navlist li
			{
				float: left;
				margin: 0;
				padding: 0;
				width: auto;
				display: block
			}
			#navlist li a, #navlist li a:link
			{
				background: #FFF;
				color: #555;
				text-decoration: none;
				padding: 3px 5px 3px 5px;
				display: block
			}
			#navlist li a#current, #navlist li a#current:link
			{
				color: #000;
				cursor: default;
				font-weight: bold;
				border-bottom: 3px solid #f90;
				background: #EEE
			}
			#navlist li a#current:hover
			{
				border-bottom: 3px solid #999;
				background: #DDD
			}
			#content {
				padding: 10px;
				background-color: #ff8080;
			}
			#footer {
				position: absolute;  /* Needed for Safari */
				padding: 10px;
				background-color: #aa3939;
				width: 75%;
			}
			#footer h1 {
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script></head><body>
		<div id="content">
			<div id="head">
				<div id="logo">
				</div>
			</div>
			<div id="navcontainer">
				<ul id="navlist">
				<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
	
			</div><br/>
			<div id="leftcontent">
				<h1>My Mixes</h1>
				<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			</div>
			<div id="rightcontent">
				right side
			</div>
		</div>
		<div style="position: absolute; top: 810px;" id="footer">
			<h1>Footer</h1>
		</div>
	</body>
</html>

how may i fix it?
thanx!

Css Positioning Issue With Web Footer

Similar Tutorials

View Content

Hi there,

Was hoping somebody could help me. I've been working on a new footer for a company and have got a positioning issue with it.

If the content of the page is rather long, it will go under the footer with the footer displaying over the top and the content carrying on below it rather than moving the footer down as long as it needs to. I've tried playing with the CSS of the DIV ID 'content' which the content sits in, and the DIV ID 'footertest' which is the footer and the below displays a test page that is the closed I have it to work.

The long list of 'testing' at the bottom should obviously push the footer down not go underneath and beyond it down the page.

The current CSS for 'content' and 'footertest' is as follows:

#content
{
width: 512px;
padding:3px;
margin:5px;
margin-left:18px;
float: left;
/*border:1px solid #000000;*/
}

#footertest {
background-image:url(/images/footertest.png);
height:70px;
width:951px;
margin-left:14px;
position:absolute;
}

I'm unable to post URLs yet so cannot provide the link to the test page I have setup.

Conflict With Ie5.0 Centering And Footer Positioning

Similar Tutorials

View Content

my pages have the following structure, which you can see in action at http://www.auroratheatre.org:

Code:

<body>
<div id="wrapper">

   <div id="header">
    header
   </div>

   <div id="content">
       <div id="col"> left nav </div>
       <div id="main"> main center column </div>
       <div id="photocol"> right column </div>
   </div>

   <div id="footer">
      footer
   </div>
</div>
</body>

and the following CSS:
Code:

html, body, #wrapper {
	min-height: 100%;
	width: 100%;
	height: 100%;
	
}

body {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 80%;
	color:#000;
	background-color:#F8ED97;
	margin: 0 auto;
}
#wrapper {
	padding: 0px;
	background-image:url(../images/back.gif);
	background-position:center;
	background-repeat:repeat-y;
	position: absolute;
}

html>body, html>body #wrapper {
	height: auto;
}

#header {
	text-align: center;
	background-color: #000;
	height: 90px;
	width: 100%;
}

#content {
	width: 775px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 30px;
}

#col {
	width: 130px;
	background-color: #900;
	float: left;
}
#main {
	width: 404px;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	text-align: left;
}
#photocol {
	width: 220px;
	float: left;
}
#footer {
	clear: both;
	background-color:#000;
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: -1px;
}

This works well for compliant browsers, centering the content on the screen and putting the footer at the bottom of the viewport even if the content isn't long. This is what I want.

The trouble is, in IE 5.0 it doesn't center the content, just the background, and everything is thrown to hell. A little scratching around revealed that if you want to center a div in IE 5.0, you need to use text-align: center. OK, but if I DO that, and add a text-align: center to the #wrapper div, then everything is OK in IE 5.0 and Mozilla, but NOT IE 6.0 - modern IE browsers do a weird thing of putting the footer to right of all the content, making the page scroll horizontally, which is ugly as hell. If I remove the position: absolute from the #footer div than that problem goes away, but the footer sits at the bottom of the content, not the viewport, and pages with short content look bad.

Anyone know of a way to have it all ways? Centered content and absolute footer and happy IE 5.0?

Thanks,
-D

Simple Layout Positioning Issue

Similar Tutorials

View Content

hey all,

i am new to using CSS. (Yes i am very much behind the times). But i am trying to rectify that!

Now the problem i am having is that i have a flash object that i simply want to align centered horizontally and it stays centered no matter what. but i would also like to position it y = 100 (x and y positioning)

any ideas!

Footer Problem

Similar Tutorials

View Content

I am having problems with the footer of our site on the homepage at http://www.themax.co/ . This problem is ONLY occurring in the AOL browser (yes, it's annoying). See the attached image...

In the AOL browser, the footer links (HOME, ABOUT, etc.) are sitting ontop of the READ MORE buttons (in the 3 bottom boxed).

I tried adding a <div style="clear:both"></div> between the footer and the boxes, but that didn't work.

Then I tried a min-height hack - I added the <div class="prop"></div> and <div class="clear"></div> tags to each of the boxes. But that didn't work (the prop and clear class are defined in my stylesheet) ... but that didn't work either. Ug.

Running out of ideas.

Please help.

Footer Problem :(

Similar Tutorials

View Content

Hiya everyone.

Right am having major issues with my new site.

The problem i am finding, is that my footer is not at the foot at the page when the content in the middle of the page is not big enough.

When i add a doze of lines to the main layer it's OK.

please check these : Works ok with content in the middle
Click here

without much content - footer rises.
Click Here

I've spend 3 hours try to sort out this annoying problem out.
Basically i want the footer to main a defined size, remaining at the very bottom of the page.

Would someone be kind enough to assist me please ?

Footer Problem

Similar Tutorials

View Content

hi Guys,

Ive had a play and cant solve this problem.

Ive got a gradient that is 200px tall that repeats across the top of my page set as the background.

I also have a container with a width of 850px centered.

I need to create another gradient that repeats across the bottom of the page (200px tall also).

What ive done is taken the footer div out of the container and put it underneath in the html set the width to 100% height to 200px and repeated the background - this works but if there is no content in the container the footer sits half way up the page sooooo I add position: absolute with bottom: 0px which brings the footer to the bottom of the page even if no content is in the container SWEET but if I start streching the actual browser window up and down the footer will ride over any other element on page.

Footer Problem In Ie8

Similar Tutorials

View Content

this is where it is about: sdomien .be/sdomien6-positionated/

the footer (now it is just the red ugly thing)
looks like i want it in IE7, but when i open it in IE8 or FF it seems to be not like in IE7
what did i do wrong?

#footer{background-color:red; width:100%; position:relative; bottom:auto;margin-bottom:0 auto;}

Footer Problem

Similar Tutorials

View Content

I am trying to create a footer and facing a problem while doing so...

This is my html code:

Code:

<div id="container">

<div id="main">

<div id="terms">

// content

</div> // closing terms 
</div> // closing main

 <div id="footer">
// content
</div>
</div> // closing container

And css is

Code:

html, body {
    height:100%;
    margin:0;            
    background: #F0FAFF;
}

#container {
    min-height:100%;
    position:relative;
}

#main {
    height:100%;
    font-size:150%;
    clear:both;
    overflow:auto;
    padding-bottom:80px;
}

#footer {
    position:absolute;
    background-color:#FF6633;
    bottom:0;
    width:100%; 
    height:80px;             
}

#termsandpolicy {
position:absolute;
left:3%;
width:72%;
top:90px;
}

And result that I get is http://www.walknshine.com/termsofuse.php

What is the problem...I have searched in google a lot but not able to get any significant css code...plzz help....

Css Footer Problem

Similar Tutorials

View Content

The dreaded CSS footer.

I've managed to get it working perfectly in IE, but Firefox isn't happy atm. If you resize the window so that it needs to be scrolled down the footer soon gets very messed up.

If you figure that out then you really, really know your stuff. Or you're a lot more awake than I am.

http://www.vaya.ws/vayadesign/