CSS - Keeping Content In Center - Table Style!

I've tried margin: 0 auto; and that didn't work.

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

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 */

Hi

I'm having a bit of trouble with a DIV/CSS layout - 2 DIVs are inside a 100% height 100% width container DIV. The first (top) DIV is the content and the second (bottom) DIV being a 100% width 240px height footer DIV.

I can make the footer stick to the bottom of the page and display fine no problem, however, I am having trouble getting the content div to fill only the area above the footer. If I specify a 100% height for it then it extends the entire height of the page and content disappears behind the footer. Plus, I want to absolutely center the content in the space above the footer, not the absolute center of the whole page, which is all i am acheiving with 100% height!

Basically, I need the content DIV to extend 100% then subtract the 240px height of the footer - I suspect it's not wise to mix px and %, however.

I have attached an image to help with my probably confusing explanation!

I do have a workaround using tables, which I would ideally like to avoid, particularly as it does not support IE6/7 browsers.

If a solution can be acheived which uses JavaScript to format the DIVs, then I am open to any suggestions anyone may have.

Thanks
R