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

Tripnologist · 20 Jul 2010 at 16:01

On your container, add margin: 0 auto;

edit: you shouldn't need to set a height either. It'll automatically expand to fit your layout.

sist_si · 20 Jul 2010 at 16:01

in container, margin:0 auto;

edit: bah! you beated me!!!

Tripnologist · 20 Jul 2010 at 16:02

Just barely.

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?

fez · 20 Jul 2010 at 16:40

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.

Muel · 20 Jul 2010 at 16:43

fez said:
<snip>

Won't that also need list-style:none; ?

GravyMonster · 20 Jul 2010 at 17:00

^ It will, but on #nav UL.

fez · 20 Jul 2010 at 17:10

Yeah, sorry, quick code snippet. ul#nav{ list-style: none; }

djkav · 20 Jul 2010 at 17:40

I think u can also use

ul#nav {display: inline;}

If you don't wanna mess around with floats

tsinc80697 · 20 Jul 2010 at 22:58

You shouldn't need list-style-none if you're using a CSS reset, which you should ALWAYS use! This is just a quick paste of Eric Meyers one but it's always good to adjust it to your own needs!

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

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

Confused · 21 Jul 2010 at 09:37

Basically, the code that tsinc80697 posted up will reset pretty much everything to 0, across all browsers.

This means that all elements will only take values that you've given them, and you won't be fighting against different browsers having their own take on how an element should be styled or positioned.

Starting from "scratch" by using a "reset" file gives you more control over positioning and style.

Tripnologist · 21 Jul 2010 at 10:34

Even better is making your own reset.

Things like navs for example, I find it easier to remove styling on my common nav IDs rather than having it removed for all lists and then being forced to style any lists I use in content.

djkav · 21 Jul 2010 at 11:03

Mark M said:
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

padding: 4px 20px; Means 4px (Top & Bottom) and 20px (Left & Right)

Info:
padding: top right bottom left;

padding:10px 5px 15px 20px;
top padding is 10px
right padding is 5px
bottom padding is 15px
left padding is 20px

padding:10px 5px 15px;
top padding is 10px
right and left padding are 5px
bottom padding is 15px

padding:10px 5px;
top and bottom padding are 10px
right and left padding are 5px

padding:10px;
all four paddings are 10px

GravyMonster · 21 Jul 2010 at 11:51

Tripnologist said:
Even better is making your own reset.

Things like navs for example, I find it easier to remove styling on my common nav IDs rather than having it removed for all lists and then being forced to style any lists I use in content.

^ Yup exactly what I do.

More often than not you actually want to have the bullets appear on a list, so it makes sense to leave list-style-type: none out of the reset.

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.