Centering a div that extends from the top to the bottom of a page?

Forum Moderators: not2easy

Message Too Old, No Replies

Centering a div that extends from the top to the bottom of a page?

ryeforumname

7:29 pm on Apr 23, 2008 (gmt 0)

I can't get this div to center. Its a bit off.

So far Im using a div to center and another div that contains the other attributes so that it would expand vertically from top to bottom.

This is my Code :


<html>
<head>
<style type="text/css">
.maincontainer {
width:700px;
margin:0 auto;
text-align:center;
}.containerblack {
padding:100px;
background-color:black;
text-align:left;
float:left;
}
</style>
</head>
<body>
<div class="maincontainer">
<div class="containerblack"> 
</div>
</div>
</body>
</html>

If anyone knows what Im doing wrong I would really appreciate some help! - Rye

Demaestro

7:39 pm on Apr 23, 2008 (gmt 0)

To center a div put this into the css for it

margin:0 auto;

ryeforumname

4:01 pm on Apr 24, 2008 (gmt 0)

Thats the problem.

I have that in there but it is still off center?

Any other thoughts?

Guki

5:16 pm on Apr 24, 2008 (gmt 0)

does the page have DOCTYPE now befor<html>?

if not, the css couldn't active.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ryeforumname

10:59 pm on Apr 24, 2008 (gmt 0)

It does...
but
thanks for trying!

ryeforumname

10:59 pm on Apr 24, 2008 (gmt 0)

It does...
but
thanks for trying!

Old_Honky

11:11 am on Apr 25, 2008 (gmt 0)

The main container is centered for me. If you want the black container centered within it, you need to give it a width, take out the float left then add the auto margins something like this:


.containerblack {
padding:100px;
background-color:black;
text-align:left;
width: 15%;
margin:0 auto;
}

[edited by: Old_Honky at 11:13 am (utc) on April 25, 2008]