How to center this...

uniquelyyours

05-26-2005, 02:04 PM

Hello All,

I have a two column layout that I want to be centered, below is what I have can anyone tell me what is needed so that it shows center and not to the left as it is now thanks

<style type="text/css">

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
</style>
</head>
<body>
<div id="container">
<div id="top">
<center><h1><img border="0" src="../images/xxx.jpg" width="537" height="55" alt="sample"></h1></center>
</div>
<div id="leftnav">

mark87

05-26-2005, 02:26 PM

Is centered when a DOCTYPE is set -

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<style type="text/css">

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

</style>

</head>

<body>

<div id="container">
<div id="top">
<center><h1><img border="0" src="../images/xxx.jpg" width="537"

height="55" alt="sample"></h1></center>
</div>
<div id="leftnav">

</body>

</html>

And you shouldn't really be using the <center> tag. :)

uniquelyyours

05-26-2005, 05:23 PM

Ok I do have the doc type but it coming to the far left of the page which is what I did not want look at this, page (http://home-making-money.com/free-articles.html) thanks mark87

:)

Bill Posters

05-26-2005, 05:28 PM

css:

body {
text-align: center; /* because IE/Win's worth it ;) */
}

#container {
text-align: left; /* re-establish left alignment */
margin: 0 auto; /* how to center in a decent browser */
...
}

hth :)

uniquelyyours

05-27-2005, 11:21 AM

Hi Bill and mark87,

I think I know why it does not look centered, at home on my xp computer it looks fine but at work since the system was Win NT it look different also I believe at work the browser version was different. Yesterday my work computer was upgraded to xp pro along with a new IE version it look fine. Thanks to both of you for your help with this.

:)

dannyhayes

05-27-2005, 11:43 AM

That still isnt any good though because you would want it to show on all browsers and operating systems dont you? :confused: .

Not everyone will be running windows xp and the most upto date version of IE?