Centering content

HTML & CSS
1

Hi all
I have a couple of divs within my body tags. How can I center my whole page regardless of browser type? At the moment I am just using margin-left on my body tag but this is obviously wrong! Cheers

2

You have to use

margin: auto 0

on your main div tag.

3

Hi tamil thanks for the reply, it doesn’t seem to work, where am I going wrong?:

<!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>User page</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>


<body>
<div style="margin: auto 0;">
<div class="logo">

<div class="logo1"><img src="nxstep/logo.jpg" width="167" height="80" alt="Have a nice day"></div>

<div class="logo2">TEXT FOR USERS<br/>
Select box	
</div>
<div class="smile"><img src="nxstep/smileyface.jpg" width="80" height="80" alt="Smiley face"></div>


</div>
<div>

<!-- flash form -->


</div>
</div>
</body>

</html>

STYLE SHEET style.css

.logo {width:80%;text-align:center;color:white;padding:0px;padding-top:0px;margin-bottom:8px;font-size:22px;text-align:center;color:white;margin-bottom:8px;font-size:22px;}
.logo1 {width:167px;float:left;}
.logo2 {width:650px;margin-top:10px;margin-left:0px;float:left;background:green;}
.smile {width:80px;float:right;}
.input {
     border: 1px solid grey;
     background: #ffffff;
  font-size : 100%;
  font-family : "Myriad Web",Verdana,Helvetica,Arial,sans-serif;
  margin-left:3px; }

 .button {
     border: 1px solid #006;
     background: #ffffff;
 }
 .button:hover {
     border: 1px solid #f00;
     background: grey;
 }
 label {
     display: block;
     width: 120px;
     margin-right: 3px;
     float:left;
	 text-align:right;
 }
 table.stat th, table.stat td {
  font-size : 67%;
  font-family : "Myriad Web",Verdana,Helvetica,Arial,sans-serif;
  background : #ffffff none; color : #630;
  height: 40px;}
  .button {
     border: 1px solid #006;
     background: #ccf;
 }
4

To center align with margin: 0 auto; requires a width to also be set on that element.

5

Hi Victorinox, thanks I did that but no joy unfortunately:

<!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>User page</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>


<body>
<div id="wrapper">
 <div class="logo">

<div class="logo1"><img src="nxstep/logo.jpg" width="167" height="80" alt="Have a nice day"></div>

<div class="logo2">TEXT FOR USERS<br/>
 Select box
</div>
 <div class="smile"><img src="nxstep/smileyface.jpg" width="80" height="80" alt="Smiley face"></div>


</div>

<div id="mainf">
<!-- FLASH FORM -->


</div>
</div>
</body>

</html>

STYLE.CSS FILE

#wrapper {width:100%;margin: auto 0;}
#mainf {width:100%;}
.logo {width:80%;text-align:center;color:white;padding:0px;padding-top:0px;margin-bottom:8px;font-size:22px;text-align:center;color:white;margin-bottom:8px;font-size:22px;}
.logo1 {width:167px;float:left;}
.logo2 {width:650px;margin-top:10px;margin-left:0px;float:left;background:green;}
.smile {width:80px;float:right;}
.input {
     border: 1px solid grey;
     background: #ffffff;
  font-size : 100%;
  font-family : "Myriad Web",Verdana,Helvetica,Arial,sans-serif;
  margin-left:3px; }

 .button {
     border: 1px solid #006;
     background: #ffffff;
 }
 .button:hover {
     border: 1px solid #f00;
     background: grey;
 }
 label {
     display: block;
     width: 120px;
     margin-right: 3px;
     float:left;
	 text-align:right;
 }
 table.stat th, table.stat td {
  font-size : 67%;
  font-family : "Myriad Web",Verdana,Helvetica,Arial,sans-serif;
  background : #ffffff none; color : #630;
  height: 40px;}
  .button {
     border: 1px solid #006;
     background: #ccf;
 }
6

[font=verdana]If you set a width of 100%, it’s going to fill the screen, so you won’t be able to tell if it’s centered or not…

Also note that tamilsuresh give you the numbers the wrong way round – it should be {margin: 0 auto;}, not {margin:auto 0;}. The first one gives you the top and bottom margins, the second one gives you the left and right margins.[/font]

7 
#wrapper {width: 940px; margin: 0 auto;}

You can increase or decrease width of 940px on wrapper div tag based on your requirement.

Sorry about previous reply with wrong code.

8

Thanks Tamil, stevie and Victorinox works great now!

9