CSS - Absolute Center Content In Div Above A Footer.

I cannot get the footer to sit at the bottom of the page when I use absolute positioning. I need the #main to stretch to whatever the content height and the footer to sit underneath. I know its fairly easy to achieve with relative positioning but I need absolute positioning for for other elements. Can anyone help?


html, body {height:100%;}

#container {
width: 900px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -450px;
}

#header {
width: 900px;
height: 105px;
position: absolute;
left:0;
top: 0;
}

#main {
position: absolute;
left:0;
top: 105px;
}

#footer {
position:absolute;
bottom:0;
border: 1px solid yellow;
}

Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content.

Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this?

Here's my css:

#container{
position:relative;
height:100%;
width:780px; }

#footer {
position: relative;
top: 0px;
left: 0px;
clear:both;
}

I am trying to display a footer below two absolute divs and whatever is the default.
[absolute][default][absolute]
[ FOOTER ]

Any suggestions or tutorials?

Whatever I try will put the footter below the default center and it will then apear under the two divs aligned absolute. Or if the center column is longer it will be below the divs. (Do I make any sense

Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it.

Please anyone help me. You can see the page at:
http://www.galakse.no/test/index.php/tscm/news
The css is located he
http://www.galakse.no/test/design/tscm/stylesheets/tscm.css

Any and all help is very much appreciated!

Thank you!

Hi,

For some reason the bottom of my content is getting chopped off on some pages. For instance, the Bookmark icon and neighboring links are getting cut off at the bottom of this page when viewing with Google Chrome:

http://www.sustainablelivingcolorad...ble-living-101/

Any ideas? Thanks.

Hello All, I am trying to put together what seems like it should be a simple css layout but it just is not cooperating. Thought maybe somebody could point out what I am doing wrong. The site is southernshades.net

If you shrink the browser and scroll down the footer goes on top of the content area. I am going crazy trying to figure out how to get the footer to stay at the bottom. Any ideas would be greatly appreciated and save my sanity. Thanks.

I'm sure this has been asked, and I've googled for help without finding anything that works. I'm redesigning a site from html/tables -> css and need to keep a footer at the bottom of each page (after the content, not stuck to the bottom of the window). Being pretty unfamiliar with css positioning I'm having a bit of trouble.

Site is here - huguenotbats . com / redesignfiles

CSS is here - huguenotbats . com / redesignfiles / stylesheets / hbstyle . css

As is everything works, but when I try to add a footer it sits on top of the content. Help, anyone??

HI hope someone can help me with this its been driving me mad for a couple of days now.

Have desiged a site with css layout but I want to center it in a page so when I resize the browser window it will stay in the middle of the page. I know its a bit long winded but I would greatly appreciate the help.

I've used the css sheet and html bellow

Thanks




---------------------------css---------------------------------

body
{
text-align: center;
background-color:#000000;
}

#container
{
margin-left: auto;
margin-right: auto;
width: 65em;
text-align: left;
}



#pageContent {
height: 100px;
width: 100%;
background-color:#000000;
border:solid #000000 thin;

}


/*Headings*/

h1{

}

h2{
font-size:16px;
font-weight: bold;
color:#ff0000;
padding-left: 0em;

}

h3{

}


/*Div id's*/


/* --------------------------------------------------title------------------------------------------------------- */

#title {
position:absolute;
width: 429px;
height: 162px;
left: 194px;
top: 25px;
z-index:1;
}

/* --------------------------------------------------titleImage------------------------------------------------------- */

#titleImage {
position:absolute;
width: 358px;
height:180px;
left: 670px;
top: 7px;
z-index:2;

}

/* --------------------------------------------------navLeft------------------------------------------------------ */


#navLeftContainer {
position:absolute;
top: 188px;
left: 194px;
width: 154px;
height: 405px;
background-color:#ffffff;
z-index:3;

}

#navLeft {
position:absolute;
top: 2px;
left: 3px;
width: 145px;
height: 395px;
background-color:#FFFFFF;
border: solid #cccccc 2px;
overflow:auto;

}

/*
#navLeft ul {
list-style:none;
padding-top: 0em;
padding-left: 0em;
}

#navLeft li {
padding-bottom: .2em;

}


#navLeft a {
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#999999;
font-weight:800;


}


#navLeft a:hover {
color:#ff0000;


}


/* --------------------------------------------------navTop------------------------------------------------------ */

#navTop {
position:absolute;
top: 188px;
left: 346px;
width: 670px;
height: 24px;
background-color:#000000;
font-family: Arial, Helvetica, sans-serif;
border: solid #ff0000 2px;
overflow:hidden;
z-index: 4;

}

#navcontainer
{

padding: 0;
height: 22px;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #000000;
width: 223px;
height: 24px;
border-top: 0px solid #000000;
border-left: 0px solid #000000;
border-bottom: 0px solid #000000;
border-right: px solid #000000;
padding: 0;
margin: 0 0 10px 0;
color: #ffffff;
text-decoration: none;
display: block;
text-align: center;
font: normal 16px/18px Arial, Helvetica, "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #ff0000;
}

#navcontainer a:active
{
background: #c60;
color: #fff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
}



/* --------------------------------------------------navBargains-------------------------------------------------- */

#navBargainsContainer {
position:absolute;
top: 594px;
left: 194px;
width: 154px;
height: 158px;
background-color:#ffffff;
z-index:5;
}


#navBargains {
position:absolute;
top: 0px;
left:2px;
width: 146px;
height: 150px;
background-color:#000000;
font-family: Arial, Helvetica, sans-serif;
border: solid #ff0000 2px;
overflow:auto;
padding-left: 0px;
color: ff0000;

}



/* -----------------------------------------------------contents---------------------------------------------------- */

#contents {
position: absolute;
left: 348px;
top: 217px;
width: 672px;
height: 535px;
background-color: #FFFFFF;
overflow:auto;
z-index:6;

}

#triangle {
position: absolute;
right: 0px;
bottom: 0px;
z-index:7;


}




/* -----------------------------------------------------html------------------------------------------------------*/




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="container">



<!-- ****************************************************title******************************************* **** -->

<div id="title">
<img src="test/images/Dark-Logo.jpg" />
</div>

<!-- ****************************************************titleImage************************************** ********* -->
<div id="titleImage"> <img src="test/images/titleImage.jpg" width="353" height="180" /> </div>
<!-- ****************************************************navLeft***************************************** **** -->
<div id="navLeftContainer">
<div id="navLeft">
<h2>Menswear</h2>

<ul>
<li><a href="linked.htm">Jackets </a></li>
<li><a href="linked.htm">Jeans</a></li>
<li><a href="linked.htm">T-shirts</a></li>
<li><a href="linked.htm">Polos</a></li>
<li><a href="linked.htm">Jumpers</a></li>
<li><a href="linked.htm">Hodies & Sweats</a></li>
</ul>



<h2>Womenswear</h2>

<ul>
<li><a href="linked.htm">Going out Tops </a></li>
<li><a href="linked.htm">Day Tops</a></li>
<li><a href="linked.htm">Shirts & Blouses</a></li>
<li><a href="linked.htm">Jeans & Denim</a></li>
<li><a href="linked.htm">Knitwear</a></li>
<li><a href="linked.htm">Polos</a></li>
</ul>
</div>
</div>


<!-- ****************************************************navTop****************************************** **** -->

<div id="navTop">

<div id="navcontainer">
<ul id="navlist">
<li id="active">
<li><a href="#" id="current">Menswear</a></li>
<li><a href="#">Womenswear</a></li>
<li><a href="#">Junior</a></li>
</ul>
</div>
</div>


<!-- ****************************************************navBargains************************************* **** -->

<div id="navBargainsContainer">
<div id="navBargains">
<h2>Items in Focus</h2>
<ul>
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
</div>

<!-- ****************************************************contents**************************************** ***** -->


<div id="contents">



<div id="triangle">
<img src="test/images/triangle.gif" width="55" height="55" />
</div>


</div>

</div>




</body>
</html>





/* Links End */

I need to center the contents of two divs in one of my sidebars. The page can be seen he http://dev.asbco.com

I need to center the free quote image and also the tabbed section beneath it.

Any help is greatly appreciated as I'm trying to launch this site by the end of the week.

Thanks!

Hi All,

I have the following layout. The problem I am having is when the "center" div has lots of text in it the text expands out of the "center" div. I would like the div to stretch with the content.

Code:

<div id="main">
	<div id="mainTop"></div>
	<div id="mainContent">
		<div id="left"></div>
		<div id="center">
			Lots and lots of text goes here
		</div>
		<div id="right"></div>
	</div><!-- end of maincontent -->
	<div id="mainBottom">
		<div id="left2"></div>
		<div id="center2"></div>
		<div id="right2"></div>
	</div>
</div>

CSS
Code:

html, body{ margin: 0px; padding: 0px; text-align: center; min-height: 100%;}
div{ border: 1px solid black;}

/* Hack for IE, Reset to 100% height */
html, body, #main, #mainContent, #left, #center, #right, #left2, #right2{
	height: 100%;
}

#left, #center, #right{
	height: 100%;
}
/* End IE Hack */

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

#mainTop{
margin: auto;
position: relative;
height: 210px;
width: 850px;
text-align: left;
background-color: yellow;
}

#mainContent{
margin: auto;
position: relative;
min-height: 100%;
width: 850px;
text-align: left;
}

#left{
position: absolute;
min-height: 100%;
width: 79px;
left: 0px;
background-color: yellow;
}

#center{
border: 1px solid red;
position: absolute;
width: 696px;
left: 79px;
background-color: #dcdbdc;
min-height: 100%;
}

#right{
position: absolute;
left: 775px;
width: 75px;
background-color: yellow;
}

#mainBottom{
margin: auto;
position: relative;
min-height: 146px;
width: 850px;
text-align: left;
}

#left2{
position: absolute;
min-height: 100%;
width: 79px;
left: 0px;
background-color: yellow;
}

#center2{
border: 1px solid red;
position: absolute;
width: 696px;
left: 79px;
background-color: yellow;
min-height: 100%;
}

#right2{
background-color: yellow;
position: absolute;
left: 775px;
width: 75px;
min-height: 100%;
}

Also shown he http://www.steudel.org/css/test.php

The yellow divs represent images that border the content. The whole layout is supposed to be able to stretch vertically. I'm not sure why the text is not stretching the center div.

TIA, Mark

http:// 192.168.0.253/ index.php?option=com_content&view=article&id=50&Itemid=67

I need for the content to stack in front of content (as it currently does) so the content appears to scroll behind it.

BUT - I need for the footer to sit at least below the fold so that it isn't so obtrusive. I'm tired of googling and can't spend any more hours trying to get it to work!!

It's an artisteer template, joomla.

Help?

THANK YOU!!

Is it possible to get my content to stick to my footer? I have a sticky footer at the bottom of my page and I would like the content to always bee 100% of the page and sitting right on top of the footer.

I been messing around with different things for hours and nothing I seem to do will get my content box to stay stuck to the footer at the bottom of my page.

Here is a link to the site printing.ou.edu/new-index.html

This is what I am trying to get printing.ou.edu/Draft3.png

Thanks for your help :-)

(EDIT)
I have Solved this problem sadly I had to use Java Script to get it done but it works.


Here is the Java Script for anyone else trying to do something like this.

Code:

<script type="text/javascript">
window.onload = function() {
  contentHeight();
}
window.onresize = function() {
  contentHeight();
}

function contentHeight() {
	if (document.getElementById) {
		var windowHeight = getWindowHeight();
		var headerHeight = document.getElementById('header').offsetHeight;
		var footerHeight = document.getElementById('footer').offsetHeight;
		var pushHeight = document.getElementById('push').offsetHeight;
		var menuHeight = document.getElementById('menu').offsetHeight;
		var contentElement = document.getElementById('content');
		var contentbgElement = document.getElementById('content-bg');
		contentElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
		contentbgElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
	}
}

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;
}
</script>

See you all around