Centering DIVs - help needed!!

**rookie156** · 12-20-2008, 06:04 AM

Hello! I am currently designing a website. It's the first time I've done anything like this for a good few years and the first time I've used CSS which is very easy thus far until I've tried to centrally align some <div> blocks! I've already looked all over the internet, read about 40 existing threads and tried every suggestion I've seen but with no luck. Also many of the suggestions deal with old browsers; I have Firefox 3 and IE 7 although obviously I would like my website to work in all browsers!!

Basically, I want my whole website to be horizontally centred. As you can see below I am at the very start of the design process and simply want my header block and my navigation menu block to be centrally aligned. I tried putting margin-left: auto and margin-right: auto tags for each of these two blocks but that did nothing and they stayed firmly rooted to the left of the screen.

I now have added these to <body> and put its width as 800px even though I want the grey background to fill all visible space, not just 800px wide. My current code then is as follows:

Here is the HTML code:

Code:

<html>

<head>

<title>Home Page</title>
<link rel="stylesheet" href="style.css">

</head>

<body>

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

<div id="navigation"></div>

</body>

</html>

Here is the CSS code:

Code:

body 	{ background: grey;
           width: 800px;
	   margin-left: auto;
           margin-right: auto }

#header {position: absolute;
	top: 10px;
	width: 800px;
	height: 100px;
	background-image: url(header.jpg) }
	
#navigation {	position: absolute;
		top: 112px;
		width: 700px;
		height: 20px;
		background-image: url(nav.jpg) }

Now when viewed in Firefox 3, the #header is centrally aligned but the #navigation is not. Its left hand side is directly in line with the left hand side of the header but as it is only 700px and not 800px this means it is not truly centered, just directly below the header with a 100px gap on the right hand side. How can I correct this?!

Even worse is when I open this page on IE7 it doesn't do anything at all - everything is just bang on the left side of the page. I've tried the text-align trick but that did nothing in Firefox and completely messed the page up in IE adding in a horizontal scroll bar for some reason!!

Aaarghhhh!!! Any advice gladly welcomed!!

Cheers

**coothead** · 12-20-2008, 07:54 AM

Hi there rookie156,

and a warm welcome to these forums.

In 'Quirks Mode', IE does not recognize margin:auto.

To put IE into 'Standards Compliance Mode' use a full dtd such as...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

coothead

**rookie156** · 12-20-2008, 08:21 AM

Hi coothead, thanks for the welcome and thanks for your help!

I pasted that dtd (something else I'm entirely new to!) at the very top of my html document and it's definitely solved part of my problem. Using the CSS in my original post above, the header is now centrally aligned in both IE and Firefox but the Navigation box is not in either - it's directly below the Header but not centrally aligned.

I have included a photo to make it easier to see what I'm probably not explaining very well!

Any ideas how I overcome this?

Thanks.

**coothead** · 12-20-2008, 08:42 AM

Hi there rookie156,

it is rarely necessary to use position:absolute for layout purposes and it's use can often cause problems.

So I would suggest that you try it like this...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
body 	{ 
    background-color:#808080;
 }
#container {
    width:800px;
    margin:auto;
    background-color:#fff;
 }
#header {
    height:100px;    
    background-image:url(header.jpg); 
 }	
#navigation {
    width:700px;
    height:20px;
    margin:2px auto;
    background-image:url(nav.jpg);
 }
</style>

</head>
<body>

<div id="container">

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

<div id="navigation"></div>

</div>

</body>
</html>

coothead

**rookie156** · 12-20-2008, 09:13 AM

Coothead - thanks so much that worked perfectly!

Will avoid the 'absolute' tag then, I didn't realise you could specify exactly where you wanted something without it.

I'm sure I will be back on here soon, especially when I have to start putting divs in divs.

Thanks again for your help!

**coothead** · 12-20-2008, 09:15 AM

No problem, you're very welcome.

Thread: Centering DIVs - help needed!!

Thread Tools

Display

Centering DIVs - help needed!!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions