Learn VBA & Macros in 1 Week!

CSS - Footer Area Not Moving With Page's Contents

Full Excel VBA Course - Beginner to Expert

Footer Area Not Moving With Page's Contents	View Content

Hi

I want to make a three column page. I will divide this page into three portions later with php. header, footer and mainbody and will use them as includes in a single page.

for now I am making the home page. I want the footer area (div) to push downward automatically according to the contents of the main area. But it is not working.

I placed <br> to do it manually but it is not the desired way.

here is my CSS code

Code:

/* CSS Document */

div.head {
 width: 1000px;
 text-align: center;
 }

div.container {
	width: 1000px;
	border: 0px;
	position: absolute;
    left: 11%;

}

div.lef { 
 width: 150px;
 float:left;
/* border: 1px solid green;*/
}


div.cen { 
 width: 500px;
 float:left;
/* border: 1px solid red; */
 text-align: left;
}


div.rig { 
 width: 150px;
 float:left;
 /*border: 1px solid black;*/
}

div.bot { 
 width: 800px;
 height: 30px;
 font-size: 14px;
 font-weight: bold;
 text-align: center;
 background-color: #996633;
 color: white;
 position: absolute;
 left: 10%;
}

p.bodytxt { 
 font-size: 12px;
 font-family: verdana;
 color: black;
 line-height: 150%;
 margin: 2px 2px 2px 2px;
}

and here is the html code
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<link rel="stylesheet" type="text/css" href="/styling.css" />
</head>
<body>
<div class="head"> <img class="head" src="/images/header.gif"> 
</div>

<div class="container"> 
  <div class="lef">left column text goes here</div>
  <div class="cen"> 
    <p class="bodytxt"> center column text goes hereasdasdasd as das d asd as 
      das d as das d asdasdas d asd as da sd as da sd sad asdasdas dasdasdasd 
      as das das d a sdas dasdasdas dasdasdasdasdasdas dasd asdasdasdasdas dasdasdasdsadasdas 
      dasdasdasdasdasdas d asd as d asd as d asd as d asd as d asd as dasd asdasdasdasdasdasdasd 
      das das d a sdas dasdasdas dasdasdasdasdasdas dasd asdasdasdasdas dasdasdasdsadasdas 
      dasdasdasdasdasdas d asd as d asd as d asd as d asd as d asd as dasd asdasdasdasdasdasdasd 
    </p>
  </div>
  <div class="rig">right column text goes here</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="bot">footer</div>

</body>
</html>

thank you

Full Excel VBA Course - Beginner to Expert

Moving Footer To The Bottom

Similar Tutorials

View Content

I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar.

Does anybody know how to do this?

Any help would be appreciated. Thank you!

Moving Links To The Bottom Of Page But Still Want Them To Appear At Top

Similar Tutorials

View Content

ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top.

i am trying to do something like this but my page just gets messed up if i move the links to below.
page layout:
Code:

<div> //overall
   <div>//top>
   <div>side Links/menu
   <div>contents
   <div>footer

Css: Page Content Is Oddly Moving To The Left

Similar Tutorials

View Content

Image Moving Across The Page When Re Sizing Browser

Similar Tutorials

View Content

Hello,

I have my XHTML code in CSS to insert an image at the top like this:

Code:

<div id="award">
   <img src="images/award.gif" alt="Year Award" />
   </div>

#award
{
position: absolute;
top: 30px;
left: 400px;
z-index: 99;
}

When I resize my browser this image just changes its position and moves across the page. And all my content is set to auto margin on left and right.

How do I make it fix into a position and wont change during resizing or the browser?

How To Root An Image Area To Bottom Of Every Page

Similar Tutorials

View Content

Can anyone suggest how I make sure the green 'Quick Contact' graphic/box always sit at the bottom of the right column (immediately above the Footer), no matter how much text there is in the lefthand column on this web page: www.ultimate-system.com/index.html , using css?

The stylesheet I'm using is found at www.ultimate-system.com/style.css.

Many thanks

Hiding Page Bg Below Footer?

Similar Tutorials

View Content

In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show?

Css -- Div -- Can't Get Footer To Go To The Bottom Of The Page

Similar Tutorials

View Content

http://wdcb.org/newsite/

Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something.

Page code:
Code:

<html>  
	<body>
		
			<div id="header">
				<?php include('includes/menu_new.inc'); ?>
			</div>
			
				<div id="leftcol">
					<div class="element">
						<img alt="" src="../images/buttons/PledgeNow.jpg">
						<p>This is what text underneath would look like.  I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
					</div>
					
					<div class="element">
						<b>PLEDGE NOW</b>
					</div>
		
					<div class="element">
						<b>PLEDGE NOW</b>
					</div>
				</div>
			
				<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
			
				<div id="rightcol">
					<div class="element">
						<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
					</div>
				
					<div class="element">
						<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
						<p>
							Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
							<br><br>
							<a href="programming/progfolkroot.php">Click here</a> to learn more.
						</p>
					</div>
				</div>
			
			<div id="footer">
				<?php include('includes/footer.inc'); ?>
			</div>
				
	</body>  
</html>

CSS code:
Code:

#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}

#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}

#leftcol .element {
	margin-bottom:15px;
}

#leftcol p {
	margin-left:5px;
}

#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}

#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}

#rightcol .element {
	margin-bottom:15px;
}

#rightcol p {
	margin-left:5px;
}

#footer {
   position:fixed;
   bottom:0px;
   width:1000px;
   height:100px;
   background:#005288;
}

Thank you in advance for your help.

Footer Positioned To Far Down Page In Ie

Similar Tutorials

View Content

Hey all,

I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here.

If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap.

If anyone would be so kind as to give me an idea why this is happening then i would be very grateful.

Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one?

Thanx for reading.

CSS Code (siteInfo is the footer in question:
Code:

#masthead{
	padding: 0px 0px 0px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}

#navBar{
	float: left;
	width: 15%;
	margin: 0px;
	padding-right: 2px;
	height: 100%;
}

#headlines{
	float:right;
	width: 45%;
	padding-right: 2px;
}

#content{
	float: left;
	width: 70%;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	position: inherit;
}
#siteInfo{
	clear: both;
	font-size: 75%;
	color: #FFFFFF;
	padding: 10px 10px 10px 10px;
	text-align: center;
	background-color: #CCCCCC;
	border-top: 1px solid #107FA4;
	position: relative;
	font-weight: bold;
}

Edited to add CSS.

Keep Footer At Bottom Of Page In Firefox 3.6.6

Similar Tutorials

View Content

Hello everyone

I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6

Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE.

The style sheet is no from me.

I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input

Eva

Here it is:

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png);
background-repeat: no-repeat;
background-position: left top;
font: 13px Verdana, Arial, Helvetica, sans-serif;
/* size: 100%; */
color: #333333;
line-height: 1.3;
margin: 0px;
padding: 0px;
}

img{
border: 0;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
font-weight: bold;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 114%;
color: black;
margin: 0px;
padding: 0px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h4{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

table{
padding: 5 px;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masterhead{
padding: 30px 0px 0px 0px;
/* border-bottom: 1px solid #cccccc; */
width: 950px;
}

#navBar{
float: left;
width: 195px;
margin: 0px;
/* 19.08.2008 padding-top: -5px;*/
padding-top: -5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
/* background-color: #e4f2f9; */
/* 19.08.2008 border-right: 1px solid #cccccc; */
}

#headlines{
position: absolute;
left: 690px;
top: 135px;
font-size: 85%!important;
/* font-size: 90%; */
/* float:right; */
width: 230px;
margin-top: -30px;
/* border-left: 1px solid #cccccc; */
/* border-bottom: 1px solid #cccccc;*/
/* padding-right: 10px; */
}

#headlines h3{
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
font-weight: 900;
}

#content{
float: left;
padding-left: 24px;
width: 460px;
font-size: 107%;
line-height: 1.4;
/* position: absolute;
top: 184px;
left: 210px; */
}

#content h1,h2 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 130%;
font-color: black;
}

#content h3 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 120%;
font-height: 90%;
font-weight: 900;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 200px;
/* font-size: x-large; */
color: #FF9900;
}

/************* #globalNav styles **************/

#globalNav{
/* border-bottom: 1px solid #CCC; */
color: #006699;
text-align: center;
/* font-weight: bold; */
margin-top: 40px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 10px;
/* 19.08.2008 border-top: 1px solid #cccccc; */
}

#globalNav img{
display: block;
}

#globalNav a {
/* font-size: 120%; */
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

/*
#pageName{
margin: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
*/

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}

/************** .feature styles ***************/

.feature{
padding: 2px 2px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
color: #006699;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}

/************** .story styles *****************/

.story{
clear: both;
font-size: 80%;
padding-top: -40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.story p{
padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
text-align: right;
border-top: 0px none #cccccc;
/* border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc; */

}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}

/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
/* border-bottom: 1px solid #006699; */
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
/* border-top: 1px solid #006699; */
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
/* background-color: #dddddd;*/
}

.navigate {
overflow: hidden;
width: 204px;
padding-bottom: 1px;
}

/**Navigation Menu **/
.navigate ul, .navigate li {
list-style: none;
margin: 0px 0px!important;
padding: 0px 0px!important;
line-height: 1.5em;
}

/**erste Navigationseben**/
.navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
display: block;
border: 0;
border-bottom: 1px solid #86c2e3;
border-top: 1px solid #fff;
border-right: 1px solid #86c2e3;
width: 100%;
text-decoration: none;
margin: 0;
padding: 5px 5px 5px 15px;
font-size: 1.0em;
font-weight: bold;
}

.navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active {
width: auto;
}

.navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px;
padding: 5px 5px 5px 15px;
color: #000;
font-weight: bold;
}

.navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px;
}

.navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}

.navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}

/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

/**Footer**/
#footer {
clear: both;
position: relative;
border-top: 4px solid #CCECF4;
font-size: 11px;
padding: 4px 4px 8px 10px;
margin-top: 4px;
bottom:0;
zoom: 1;
}

#footer .left {
float: left;
width: 700px;
bottom:0;
}

#footer .right {
float: right;
width: 150px;
text-align: right;
margin-top: -2.3em;
zoom: 1;
position: relative;
z-index: 0;
bottom:0;
}

#footer p {
color: #000 !important;
padding: 0;
margin: 0;
bottom:0;
}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active {
color: #306479;
text-decoration: none;
font-weight: bold;
}

#footer a:hover, #footer a:focus {
text-decoration: underline;
}

#navispalte {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 202px;
float: left;
}

Pushing Footer To Bottom Of Page...

Similar Tutorials

View Content

Hi everyone,

It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on...

http://www.karenwilliamson.com/joom2/

I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean.

Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF.

It seems to my novice eyes that it should be controlled by
Code:

table.contentpaneopen

Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers?

Thanks for any input

Rob

Having Trouble Aligning Footer To End Of Page! >_<

Similar Tutorials

View Content

Hi everyone,

I'm having some trouble positioning this footer to the bottom of the page. I'd like for the footer box to display directly under the content/navigation bar, with a gap of four pixels between the respective boxes.

In action: http://www.stabhead.com/css/index.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
		<title>Layout</title>
		<style type="text/css">

<!--

body {
	background-color: #FFFFFF;
	color: blue;
	text-align: center;
	margin: 5px 0px 0px 0px;
}

#container {
	position: relative;
	width: 981px;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
}

#topbar {
	position: absolute;
	width: 981px;
	height: 95px;
	top: 0px;
	background-color: #DDDDDD;
}

#loginbox {
	position: absolute;
	width: 249px;
	height: 92px;
	top: 97px;
	background-color: #FFBD72;
}

#adbar {
	position: absolute;
	top: 97px;
	left: 251px;
	width: 730px;
	height: 92px;
	background-color: #949494;
}

#navbar {
	position: absolute;
	top: 193px;
	left: 0px;
	width: 117px;
	background-color: #DDDDDD;
}

#content {
	position: absolute;
	top: 193px;
	left: 121px;
	width: 860px;
	background-color: #DDDDDD;
}

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

-->
		</style>
	</head>
	<body marginheight="0" marginwidth="0">
		<div align="center">
			<div id="container">
				<div id="topbar">topbar</div>
				<div id="loginbox">loginbox</div>
				<div id="adbar">adbar</div>
				<div id="navbar">navbar</div>
				<div id="content">content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
				</div>
			</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>

The content may consist of something that is 500 pixels in height, or 10,000 pixels - it totally depends on how many words or images are in there, so the footer needs to grip on to the bottom of the content and stretch across the whole of the bottom of the page.

If anyone could help me out here, it would be greatly appreciated.

Text Won't Push Footer Down The Page

Similar Tutorials

View Content

Hello,

I've had an issue for a while where when the text on the page gets to a certain point it just overlaps the Copyright Information which I want to stay at the bottom of the page.

--- (I did look at older forum posts, but with no resolve) ---

In the CSS code, I have the copyright (a.k.a. .footerlinks) set with an "Absolute" Position which I know is probably "part of" or "the" problem, but if I change the Positioning the footer ends up on the top of the page or somewhere I don't want it.

(** Unfortunately due to New Members not being able to post hyperlinks I am unable to give a link to the webpage or CSS page for viewing. **)

But, I have included the code snippet I use for the Footer itself and the "container" and "body" code whether its needed.....

body{
margin:0;
text-align:center;
background-color: #FFFFFF;
}

.container{
position: relative;
width:965px;
margin:0 auto 0;
height: 100%;
}

.footerlinks{
position: absolute;
top: 1140px;
left: 237px;
width: 551px;
font-size: 75%;
font-family: verdana;
text-align: center;
}

CSS is quite new to me so be as specific as possible as to what I should be looking at changing in my code....

Your assistance is much appreciated!

Thanks!

Dan -

Getting Footer To Extend The Height Of The Page

Similar Tutorials

View Content

Hello, I have been working on this for over 2 days and learning plenty in the process. Yet, I have come to a roadblock. I need the footer, which is outside the main container, to extend to the height of the page. The problem is that the page height changes with each page, and will change in the future, as the info for the pages will be pulled from a database.

Please have a look at the footer on my site and tell me what might be a good solution. Here's the site: http://www.caillouette.com/FriendsCSS2/index.php

thanks
-Sean

Keeping A Footer Div At The Bottom Of The Page

Similar Tutorials

View Content

Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page.

my site
stylesheet (see div#footer)

Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work.

Keeping The Footer On The Bottom Of The Page

Similar Tutorials

View Content

Greetings,

My example page is located here.

As you can see I'm having issues on the bottom of the page. I believe I know what is causing the issue, just not how to fix it. I need it only to work in IE and at a resolution of 1024x768 and higher.

I have the footer outside of the other wrappers which are set to 100% height. But wrapper_04, which does not include the header, seems to be extending past the footer the same height as the header because it is trying to be the same height as the other parent wrapper elements?

Any thoughts on how I can fix this using just CSS? I do have some js which sets the height of the content_wrapper so the background image extends the full height (yellow line image on the right of the page), but it should not be affecting the rest of the page.

Thanks in advance for any assistance!

Footer Moves When Page Is Refreshed?

Similar Tutorials

View Content

hey all, i have a strange problem...

When the page opens the footer appears on top of the page content but if i refresh the page it goes to the bottom as expected?? really wierd can someone please help me with this?

here is the page lin to see what i mean

page with the problem

and here is a link to me css

css page

Any ideas would be great. I am using firefox

Thanks

RF

Footer Sitting In The Middle Of Page Til Refresh

Similar Tutorials

View Content

Hi again,

i've built an image gallery using an unordered list and php to grab 'em from the database.

when you first go to the page (both in FF and IE) the footer bar sits in the middle of the page, until you refresh, then it's fine.

same thing happens when you click to enlarge it.

Here's the page

Here's the CSS;
Code:

/* SHOWCASE STYLE - firefox */

html>body ul.showcase {
  margin:5px 1px;
  margin:auto;
  list-style: none;
  width:760px;
  }
  
html>body li.showcase {
  margin-top:5px;
  margin-left:10px;
  float:left;
  width:180px;
  }
  
/* SHOWCASE STYLE - IE */

  * html ul.showcase {
  margin:5px 1px;
  margin:auto;
  list-style: none;
  width:750px;
  }
  
  * html li.showcase {
  margin-top:5px;
  margin-left:8px;
  float:left;
  width:179px;
}

img.showcase {
border:1px solid #CCCCCC;
}

i'm sure it's somethin' to do with clearing the floats, but i just don't get why it's cool after you refresh.

thanks!

Footer / Bottom Of Page Driving Me Nuts

Similar Tutorials

View Content

I bought a php template to put my father website together with. I had worked with html and asp and had thrown together sites quickly in the past, so I didnt think much of it... But php turns out to be a whole new animal I guess, or maybe im missing something simply in the css.

I have spent the last 4 hours looking online and asking friends, and I am no closer. I see plenty of forums with footer issues here, but none have given me any clues.

Here is the site(im new, i cant post URLs): http://aeroprepare.com

You will note that the bottom of the page has a large gray gap, between the footer content and the copywrite area. I simply want to remove this gap, shorten it, so the footer fits closer to the bottom of the page, like the copywrite section does. Sounds simple, but its driving me NUTS.

here is my CSS:
Code:

/*** CSS Resets ***/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 14px;
	font-family: inherit;
	vertical-align: baseline;
}ul {list-style: none;}table {	border-collapse: separate;	border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";}

/*** Start Site CSS ***********************************************************/
html, body {height: 100%;}
body {
    font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
    font-size:12px;
    background-color:#fff;
}

#hm_background, #background { 
    min-height: 100%;
    height: auto !important;
    height: 100%; 
    margin-bottom:-340px;    
}

#hm_background {
    background-repeat:repeat-x;
    background-position:top;  
}

#background {
    background-repeat:repeat-x;
    background-position:top;
}

.clear {
    clear:both;
}

.clear-border {
    margin:15px 0 15px 0;
    clear:both;
    border:1px solid #dbdbdb;
}

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

#logo {
    float:left;
    margin:27px 0 0 0;
    width:284px;
    height:67px;
}

#logo_home {
    float:left;
    margin:32px 0 0 45px;
    width:212px;
    height:52px;
}

/*** navigation ***************************************************************/
#nav_wrap {
    position:relative;
    margin:25px 0 0 460px;
    padding:12px 0 0 15px;
    background-repeat:no-repeat;
    width:464px;
    height:52px;
    z-index:99;
}

#nav {
    list-style-type:none;
    margin:0;
    padding:0;
}

#nav li {
    float:left;
    margin:0;
    padding:0;
}

#nav li a {
    position: relative; 
    float: left;
    margin: 0 11px 0 0;
    padding: 0 17px 0 0;
    height: 37px;
    text-decoration: none;
    color: #fff;
    font-size:12px;  
	z-index: 2;
}

#nav li a span {
    display: block;
    line-height: 21px;
    padding: 3px 0 5px 20px;
    color: #fff;
}

#nav_hover {
	position: absolute;
    float: left;
    margin: 0 11px 0 0;
    padding: 0 17px 0 0;
    height: 28px;
	z-index: 1;
}

#nav_hover span {
    display: block;
    padding: 3px 0 5px 20px;
    line-height: 21px;
    height: 28px;
	z-index: 1;
}

/*** Dropdown ***/
#nav ul {
    position:absolute;
    display:none;
    padding:0 0 12px 0;
    width:142px;
    top:48px;
    list-style-type:none;
    z-index:99;
}

#nav li ul li {
	margin:0;
	padding:0;
}

#nav li ul a, #nav li ul a:visited {
    float:left;
    padding:4px 0 0 12px;
    width:130px;
    height:20px;
    font-weight:normal;
}

#nav ul ul{
	top:auto;
}	

#nav li ul ul {
    left:142px;
    margin:0;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
}


/*** footer *******************************************************************/
#footer_wrap, .push {
    height: 360px;
    clear: both;
}

#footer_wrap {
    background-color:#e5e5e5; /*e5e5e5*/
    border-top:1px solid #B3BCBF;
}

#footer {
    margin:0 auto;
    padding:12px 0 0 40px;
    width:920px;
}

#footer a {
    text-decoration:none;
}

.foot_clm_block {
    float:left;
    margin:25px 15px 15px 0;
    width:165px;
}

.foot_clm_heading {
    margin:0 0 5px 0;
    font-size:14px;
    text-transform:uppercase;
    color:#fff;
}

.foot_clm_block ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.foot_clm_block ul li {
    color:#7F7F7F;
}

.foot_clm_block ul li a {
    display:block;
    padding:5px 0 0 5px;
    height:20px;
    color:#fff;   
    border-bottom:1px solid #CDCDCF;
    font-size:12px;
}

.foot_clm_block ul li a:hover {
    color:#4E4E4E;
}

#search_form_footer {
    margin:5px 0 10px 1px;
    height:24px;
    border:1px solid #fff;
    background-color:#fff;
}

#search_footer {
    float:left;
    padding:3px;
    width:120px;
    border:none;
}

#social_icons {
    margin:5px 0 0 6px;
}

#social_icons a {
    margin:0 4px 0 0;
}

#copyright_wrap {
    border-top:1px solid #f1f1f1;
    height:40px;
}

#copyright_txt {
    margin:0 auto;
    margin-top:10px;
    width:880px;
    color:#fff;
    font-size:11px;
}

#copyright_txt a {
    color:#fff;
    font-size:11px;
}

/*** home page ****************************************************************/
#hm_header {
    height:139px;
    background-repeat:no-repeat;
    background-position:top center;
    padding-top: 1px;
    padding-bottom: 1px;
}

#slider {
    margin:0 0 0 23px;
    padding:10px 0 0 33px;
    background-repeat:no-repeat;
    width:881px;
    height:298px;
}

#slider_imgs img {
    display:none;
}

#news {
    margin:15px 0 10px 25px;
    background-image:url(../images/news_back.jpg);
    background-repeat:no-repeat;
    width:911px;
    height:65px;  
    overflow:auto; /* fixes margin collapsing */
}

#news_icon {
    float:left;
    margin:17px 0 0 17px;
    background-image:url(../images/airplaneminilogo.png);
    background-repeat:no-repeat;
    width:55px;
    height:41px;     
}

#news_text {
	margin:20px 0 0 15px;
	float:left;
	font-size:20px;
	text-align:left;
	width:800px;
}

#news_text ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#news_text a {
    text-decoration:none;
}

#three_columns {
    margin:0 0 0 25px;
    background-image:url(../images/3column_back.jpg);
    background-repeat:no-repeat;
    width:910px;
}

.three_clm_block {
    float:left;
    margin:25px 0 45px 0;
    padding:0 25px;
    width:250px;
    height:200px;
    background-image:url(../images/3column_border.jpg);
    background-repeat:no-repeat;
    background-position:top left;
}

.three_clm_circle {
    float:left;
    padding:6px 0 0 0;
    width:32px;
    height:26px;
    background-repeat:no-repeat;
    background-position:top left;
    color:#fff;
    text-align:center;
    font-size:16px;
    font-weight:bold;
}

.three_clm_title a {
    float:left;
    padding:5px 0 0 8px;
    font-size:20px;
    text-decoration:none;
}

.three_clm_text {
    padding-top:7px;
    clear:both;
    line-height:19px;
}

/*** portfolio ****************************************************************/
#port_title h1 {
    margin:15px 0;
    font-size:34px;
    font-weight:normal;
}

#port_wrap {
    padding:32px 0 0 0;    
}

.port_block {
    float:left;
    margin:0 22px 22px 0;
    padding:7px;
    background-color:#d6d9da;
    border:1px solid #a7a9a9;
    width:426px;
    height:346px;
}

.port_img {
    position: relative;
    border:1px solid #fff;
    background-color:#fff;
    width:425px;
    height:324px;
}

.port_txt {
    position: absolute;
    top: 110px;
    left: 0;
    padding:2px 0 0 10px;
    width:240px;
    height:18px;
    background-color:#fff;
}

.port_mag_img {
    position: absolute;
    top: 10px;
    left: 81px;
}

.port_txt a {
    font-weight:bold;
    text-decoration:none;
}

.port_img img {
    border:none;
}

/*** blog / static page *******************************************************/
#header {
    height:139px;
    background-repeat:no-repeat;
    background-position:top center;
    padding-top: 1px;
    padding-bottom: 1px;
}

#breadcrumb {
    padding:15px 0 0 0;
    height:25px;
    color:#fff;
    font-weight:bold;
}

#breadcrumb a {
    color:#fff;
    font-weight:bold;
    text-decoration:none;
}

/*** sidebar ***/
#sidebar {
    float:left;
    margin:25px 0 0 0;
    width:220px;
}

.sidebar_block {
    margin:0 0 35px 0;
}

.sidebar_heading {
    font-size:18px;
    border-bottom:5px solid #d6d9da;
    color:#23353e;
}

#sidebar ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#sidebar ul li a {
    display:block;
    padding:4px 0 0 30px;
    height:21px;
    border-bottom:1px solid #d6d9da;
    text-decoration:none;
    color:#B3BCBF;
    background-image:url(../images/bullet_arrow.jpg);
    background-repeat:no-repeat;
}

#sidebar ul li ul li a {
    padding:4px 0 0 54px;
    background-image:url(../images/bullet_arrow_sub.jpg);
    background-repeat:no-repeat;
}

#sidebar a:hover {
    color:#959D9F;
}

#search_form {
    margin:5px 0 0 1px;
    width:216px;
    height:24px;
    border:1px solid #d6d9da;
    background-color:#fff;
}

#search {
    float:left;
    padding:3px;
    width:180px;
    border:none;
}

.search_btn {
    float:right;
    margin:1px 0 0 0;
    background-image:url(../images/search_icon.jpg);
    background-repeat:no-repeat;    
    background-position:center;
    border:none;
    background-color:transparent;
    cursor:pointer;
    width:25px;
    height:22px;
}

/*** content ***/
#content {
    float:left;
    margin:25px 0 0 55px;
    width:645px;
}

#contentblog {
    float:left;
    margin:25px 0 0 55px;
    width:100%;
}

#content_full {
    float:left;
    margin:25px 0 0 0;
}

.post_block {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom:1px solid #d6d9da;    
}

#page_block {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;  
}

#page_title h1 {
    margin:0 0 5px 0;
    padding:0;   
    font-size:34px;
    font-weight:normal; 
    
}

#content h1 a {
    font-size:34px;
    font-weight:normal;
}

.post_meta {
    height:20px;
    font-weight:bold;
    color:#929393;
}

.post_meta a {
    text-decoration:none;
    font-weight:bold;
    color:#929393;
}

.post_img {
    padding:7px 0;
    margin:10px 0;
    border-top:1px solid #d6d9da;   
    border-bottom:1px solid #d6d9da;
}

.post_txt {
    line-height:20px;
    color:#23353e;
}

.post_txt img {
    padding:3px;
    border:1px solid #b3b3b3;
}

.onethird {
    padding: 0 0 0 15px;
    float:left;
    width:30%;
}

.onehalf {
    padding: 0 0 0 15px;
    float:left;
    width:47%;
}

.twothirds {
    padding: 0 0 0 15px;
    float:left;
    width:64%;
}

.post_readmore {
    margin:5px 0 0 0;
}

.post_readmore a {
    text-decoration:none;
    font-weight:bold;
    color:#23353e;
}

#pagination {
    margin:15px 0;
    height:32px;
}

#pagination ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#pagination ul li { float:left;}

#pagination ul li a {
    float:left;
    margin:0 5px 0 0;
    padding:8px 0;
    width:31px;
    height:23px;
    color:#fff;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    background-image:url(../images/pagination.jpg);
    background-repeat:no-repeat;
}

#pagination ul li a.active, #pagination ul li a:hover {
    background-image:url(../images/pagination_active.jpg);
    background-repeat:no-repeat;    
}

/*** comments *****************************************************************/
#comments {
    margin:0 0 40px 0;
}

.comm_block {
    padding:25px 0 25px 0;
    border-bottom:1px solid #e7e7e7;
}

.comm_avatar {
    float:left;
    padding:3px;
    width:50px;
    height:50px;
    background-color:#fff;
    border:1px solid #e7e7e7;
}

.comm_meta {
    float:left;
    margin: 0 0 0 20px;
    width:550px;
}

.comm_author {
    font-size:16px;
}

.comm_text {    
    float:left;
    margin: 0 0 0 20px;
    width:564px;
    line-height:18px;
}

.comm_even {
    background-color:#fff;
}

#comm_form {
    margin:20px 0;
}

/*** contact ******************************************************************/
#contact_txt {}

#google_map {
    margin:5px 0;
    border:1px solid #b3b3b3;
}

#contact_form {
    margin:20px 0;
}

.err {
    color:#BF2323;
}

/*** forms ********************************************************************/
.form_tb {
    padding:3px;
    width:400px;
    height:18px;
    border:1px solid #b3b3b3;    
    color:#254A59;
}

.form_ta {
    padding:3px;
    width:639px;
    height:150px;
    border:1px solid #b3b3b3;
    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:12px;
    color:#254A59;
}    

.form_btn {
    padding:5px 7px;
    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:12px;
    color:#fff;
    border:none;
    background-color:#fff;
    cursor:pointer;
    background-repeat:no-repeat;
    width:114px;
    height:33px;    
}

/*** global *******************************************************************/
ul {
    padding:0 0 0 30px;
    list-style-type:square;
}

ol {
    padding:0 0 0 30px; 
}

a {
    color:#03181F;
}

p {
    margin:0 0 10px 0;
}

h1 {
    margin:0 0 15px 0;
    font-size:34px;
    font-weight:normal; 
}

h1 a {
    text-decoration:none;
}

h2 {
    margin:0 0 7px 0;   
    font-size:24px;
    font-weight:normal; 
}

h3 {
    margin:0 0 5px 0;  
    font-size:18px;  
    font-weight:normal; 
}

h4 {
    margin:0 0 5px 0; 
    font-size:16px;   
    font-weight:bold; 
}

h5 {
    margin:0 0 3px 0;  
    font-size:14px;  
    font-weight:bold; 
}

blockquote {
    margin:20px 0 20px 30px;
    padding:0 10px;
    border-left:5px solid #dbdbdb;
}

strong {
    font-weight:bold;
}

.hidden {
    display:none;
}

.noborder {
    border:none;
}

.noimage {
    background-image:none;
}

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

view page source to see the home page. I dont have the footer in an incorrect div (that i can see)

Please can someone far smarter than me see whats going on here. I have taken the footer apart, edited the style sheet a 100 different gut-shot ways, tried to recreate the page, ripped apart the wrapper and other sections...

If I touch the height on the footer push, the whole footer moves to the center of the page... If I try to move around it, I get dead space between the end of the text and the beginning of the footer....

PLEASE someone show me what im missing, ive lost hair over this, and my laptop is about to find out if its impact resistant.

Strange Gap Between Top Of Page And Header / Content And Footer ?!

Similar Tutorials

View Content

Long Page Text Not Pushing Footer Down

Similar Tutorials

View Content

Hello,

I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length.

Instead the text just covers and hides the footer.

I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique.

If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed.

As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy.

-------

Here's a link to the page thats having issues with the footer...

*** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........

infoheaven.bravepages.com/Testamonials/Testimonials.htm

The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above.

I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message.

Sorry for the inconvenience....

Dan -