vertically centering head/content/footer divs within a master div

**holyrhapsody** · 11-30-2008, 01:05 AM

Description pretty much says it all. I have 3 divs that are all inside 1 master div. I need to know how to vertically center them without screwing up the layout. Here is my code:

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#master {
    text-align: center;
    position: relative;
    top: auto;
    height: auto;
    width: 850px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    left: 0px;
    vertical-align: middle;
    bottom: auto;
}
#header {
    position:absolute;
    left:0px;
    top:0px;
    width:850px;
    height:200px;
    z-index:1;
    color: #996;
    background-color: #00CC33;
}
body {
    text-align: center;
    vertical-align: middle;
    background-color: #00F;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    background-image: url(ALL%20WEBSITE%20STUFF/Photoshop/finished%20artwork/cellbg.gif);
    background-repeat: repeat;
}
#content {
    position:absolute;
    left:0px;
    top:200px;
    width:850px;
    height:400px;
    z-index:2;
    background-color: #FF3333;
}
#footer {
    position:absolute;
    left:0px;
    top:600px;
    width:850px;
    height:100px;
    z-index:3;
    background-color: #00CCCC;
}
-->
</style>
</head>
<body valign="middle">

<div id="master">


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


</div>

</body>
</html>

**Nora** · 11-30-2008, 06:25 AM

Not sure what you mean by aligning vertically.. do you mean you want all div elements to show up under each other?

I'm not sure what your goal is with z-index. Your CSS is a lot more complicated than it has to be. Try this:

Quote:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body valign="middle">

<div id="master">

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

</div>

</body>
</html>

You don't need to use positioning for a basic layout.. divs will automatically align themselves vertically. If not, just use the clear: both; property.
Hope this helps

**LadynRed** · 12-01-2008, 02:54 PM

Clear:both ONLY applies when using floats.

All that positioning is definitely NOT necessary, and you'll never achieve your goal by using it that way.

**CSSKid** · 12-05-2008, 07:58 AM

woah, you dont really know what your doing here.I understand your a newbie.Here is a example i pulled together for you.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background:#ccc;
}
#wrapper {
height:100%;
width:100%;
margin:auto;
padding:auto;
}
#Header {
   width:850px;
   height:100px;
   background-color: #00CC33;
  
}

#Content {
     background-color: #FF3333;
     width:850px;
     height:400px;
     padding-top:2px;
     
}

#Footer {
    background-color: #00CCCC;
    height550px;
    width:852px;
    padding-top:2px;

}


</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title goes here</title>
</head>
<body>

<div id=""wrapper">

         <div id="Header">
     
     <p>This is some Example Text</p>

</div>

         <div id="Content">
     <P>This is some Example Text</p>

</div>

    

      <div id="Footer">

     <p>This is some Example Text </p>

</div>




</div>



</body>
</html>

Use that or this

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
<style type="text/css">
body {
background:#ccc;
margin:20px;

}

#container {
margin: 0 auto;
width:940px;
}

#header {
height:120px;
width:900px;
text-align:left;
background:#111;
color:#fff;
margin:8px;
float:left;
padding:20px;
margin:0px;

}
#footer {
width:940px;
height:630px;
background:#777;
text-align:left;

}

#content {
height:400px;
width:916px;
float:left;
background:#fff;
padding:12px;
margin:0px;
}
img {
float:right;
border:2px dotted #111; 
clear:both;
}

</style>
</head>
<body>
<div id="container"><div id="header">


<p>This is your header</p>
</div>


<div id="content">
<img src="Your image">
<h2>Hello,</h2>



<p>This is your inside content</p>
<hr>
</div> 

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

         </div><!--Footerends-->
   

</div><!--Containerends-->
</body>
</html>

**davemies** · 12-05-2008, 08:54 AM

css kid - you might want to check that page for errors...

**CSSKid** · 12-05-2008, 09:19 AM

Quote:

Originally Posted by davemies

css kid - you might want to check that page for errors...

Yeah, i know. Sorry for some of the messups ive been up all night LOL.
Well my second Example is good.But heres a better version.http://www.pmob.co.uk/temp/1colcentred.htm
Try this link it might help you out.

**LadynRed** · 12-05-2008, 10:16 AM

I would advise against using those hacks, it's a very bad habit to get into.

Oh.. and adding a clear:both to the floated element itself is ineffective for clearing floats.