CSS - Make Sidebars Reach Footer & Center Content Div

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

Hey gang,

I'm sure this has been asked many times, but i cannot find the words to search for this. Luckily, I'm sure it is a quick fix.

I'm not great with CSS, but I feel I have a strong understanding. However, I must not completely understand divs, because when I try to add padding to this "right content" div, it pushes itself behind the footer div (the bright green box):



The box on the left is the "left-content", the box on the right is "right-content." Each of the boxes are floated left and right, respectively, and they are both in a "container" div that centers them.

How can I make the footer div just be pushed down with content is added to either the right/left-content div?

I can add a bunch of "<br />s after the last bit of content, and the footer moves down, but I feel it is cleaner to just add 20x padding.

Any help is greatly appreciated!

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

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!!

Hi,

I am generating what should be a simple css layout. I have a header, some left content (which is comprised of layers that hold an image and some over the top to form a kind of navigation tablet), some content to the right of that for text, and finally a footer. Bog standard design...

The problem I have is that the content to the right of the left content is sat below both the left content and the footer currently.

What it should be doing is sitting to the right of the left content and where the text 'grows' push the footer down the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
        padding:0;
        margin:0;
        color: #000000;
}

#wrapper {
		position: relative;
		min-height: 100%;
		height: auto !important;
		height: 100%; 
	}

#header{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:224px;
        border-top:0px solid #feffff;
        border-bottom:0px solid #feffff;
        overflow:hidden;
        color: #000000;
}



#content {
		background-color: #ccc;
		padding-bottom: 50px;
	}
	
* html #footer {/*only ie gets this style*/
        \height:40px;/* for ie5 */
        he\ight:38px;/* for ie6 */
}



#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}

#navlist li a { 
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}

a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}

	#content {
		background-color: white;
		padding-bottom: 50px;
		padding-left: 200px;
		padding-top: 0px;
	}
	
		#footer {
		background-color: #ff0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		position: absolute;
		bottom: 0 !important;
		bottom: -1px;
	}
	
	
	</style>
	
</head>
<body>
<div id="wrapper">
		<div id="header">
			<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="224" align="left" />
		</div>
		
		
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 4px; top: 229px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
</div>

<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 257px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>


<div id="content">
			<p>Stuff.</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p><p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
				</div>
				
	
	<div id="footer">
		<p>Footer</p>
	</div>
</div>
</body>
</html>

Thanks,


G

Every time I run the code below my copyright always winds up at the top of the page. If I remove the button div and place normal html in the code the foot works the way I want. I just seem to get messed up with the divs. Any help will be appreciated

Andy

#foot {
clear: both;
color: #000;

}
#foot p {
margin: 4px;
text-align: center;
}
#button {
position: absolute;
padding: 0px;
top: 40px;
left: 150px;
width: 5%;

}

<html>
<head>
<title></title>

<link href="include/styles.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="button">
<img src="images/button.bmp">
</div>

<div id="foot">
<p>Copyright 2007 </p>
</div>

</body>
</html>

Here's how the footer looks now:



And here's the desired result:



Any ideas? It'll have to be cross-browser friendly (even IE6, god help me).

Thanks!

I have a container div which includes a #header div, a left-floated #content div, a #right div, and a #footer div. The #content div has a background image that does not want to extend all the way down within the div to snuggly join the footer in any IE browser. I've tried the Holly hack, adding a line-height, relative positioning but to no avail. The stylesheet is embedded in the html file. Here's the link:

http://www.emaycreations.net/BuildWebsiteIII/Week6/finalexamPractice.html

It looks great in NN, FF and Opera but neither IE 5 nor 6 displays the page correctly. Can anyone help?

Mari-Anne in Montana

I have ads on the side of my website that when clicked open a div with a larger ad. The problem is that if a user has scrolled the page down and then clicks the ad, the div shows at the top of the page out of view, how can I fix this. I have tried position:fixed, relative and inherit as well as absolute but nothing works.

Tim

Hi guys,

I recently redeseigned my site using CSS from tables. When the window (IE) was made smaller before, the content would stay put but you just wouldnt see it all (obviously cause now the window is smaller) but with CSS it dumps it at the very bottom of the screen and leaves my content area totally blank.

Is there some way this can be fixed?

Daragh