How to centre a div automatically?

Mark M · 20 Jul 2010 at 16:00

Im finally trying to move away from tables and Ive set up a test page using divs. Everything is going great with the virtical positioning of them but Id like the whole thing to be centred in the middle the screen.

Here is the 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" />
<link rel="stylesheet" type="text/css"  href="style.css" />  
<title>DIV Test</title>

</head>

<body>

<div id="container">

<div id="logo">
<p>Logo</p>

</div>

<div id="navbar">
<p> Navbar </p>

</div>

<div id="banner">
<p> Banner </p>

</div>

<div id="main">
<p> Main </p>
</div>

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

</div>






</body>
</html>

And the CSS:

Code:

#container	{width:1024px;
			height:1030px;

}

#logo 		{width: 1024px;
			height:150px;
			position:absolute; 
			top:0px;
			font-size:36px;
			background-image:url(../images/logo.jpg');
			
			}

#navbar 	{width: 1024px;
			height:100px;
			position:absolute; 
			top:150px;
			background-color:#000000;
			}			
			
#banner 	{width: 1024px;
			height:200px;
			position:absolute; 
			top:250px;
			background-image:url(../images/banner1.gif');
			background-color:#666600;
			}			
			
#main 		{width: 1024px;
			height:500px;
			position:absolute; 
			top:450px;
			background-color:#FFFFFF;
			}			
			
#footer 	{width: 1024px;
			height:80px;
			position:absolute; 
			top:950px;
			background-color:#FF00FF;
			}			

body		{background-image:url(../images/background2.jpg');
			background-repeat:repeat;
			}

Ignore the daft colours was just using them to make sure I knew what was what etc.

Ive tried moving the position of the container div but Im not getting it to go the way I want it to!! Tried google but it keeps coming back with text alignment tutorials so may be searching for the wrong phrase?

Thanks, Mark

Mark M · 20 Jul 2010 at 16:04

Top of the pops!!

Thanks.

Mark M · 20 Jul 2010 at 16:32

Stumbled across the next problem so thought I would post it here rather than start another css layout topic...

In the navbar div I want to have 5 links going horizontally. Is the easiest way to put 5 seperate divs within the navbar or 1 div and space out the text (if thats even possible?)

Never attempted to horizontally align divs but assume it would just be a case of positioning them from the left by the number of px's?

Mark M · 21 Jul 2010 at 09:33

fez said:
What you want to do is create an unordered list and then float all of the elements left. Put the ul into the navigation div.

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

css -

#nav li{
float: left;
padding: 4px 20px;
}

Have a go with that and see how you get on, any questions just ask.

Thanks, this way is working a treat. Only thing Im not too sure on is the padding> is 4px from the top and 20px from the left?

To get it in the centre do you have to divide the div width by the number of list items? When I do that it ends up on another line underneath? 68px seems to have it pretty much in the centre? Edit - div width is 1024

Tried to work out tsinc80697's code but it was a bit like trying to read the matrix

Mark M · 22 Jul 2010 at 11:41

Thanks for all the tips and advice. Got a few more questions but will save them for another day!!

Will have a look into the browser reset when I get a spare half hour thanks.