PDA

Click to See Complete Forum and Search --> : div not centering my page on IE

ituano
04-21-2007, 09:38 AM
I have used the div tag with left and right margins set to auto to center my page. However on the design view on dreamweaver as well as while previewing it in IE the page is aligned to the left. This is not the case when previewed in other browsers like Opera and Mozilla. In the aforementioned browsers he page is centrally positioned.
What should I do to ensure that the page is centrally positioned in both the design view as well as when previewed over the IE.
I have below the Css
#container
{
background: #ffcc00;
width: 760px;
text-align: left;
margin-right: auto;
margin-left: auto;
}

Thanks
ituano
coothead
04-21-2007, 01:34 PM
Hi there ituano,

try it like this...

<!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">

<style type="text/css">
#container {
background: #ffcc00;
width: 760px;
text-align: left;
margin-right: auto;
margin-left: auto;
}
</style>

</head>
<body>

<div id="container"> centered container</div>

</body>
</html>
Make sure that you always use a DOCTYPE.

Further reading :-
http://www.w3.org/QA/2002/04/valid-dtd-list.html
coothead
ituano
04-21-2007, 02:14 PM
Coothead
I would like the centralized container to harbour a header div; left column div; center column div; right column div and finally a footer div. Below is my attempt, but it is not fitting together:
<div id = "container">
<div id = "Lcolumn"> </div>
<div id = "Home"><img src="images.gif" width="600" height="600"></div>

<div id = "Rcolumn"></div>
<div id = "Footer"></div>
</div>

I have specified my CSS below:
#container
{
width: 790px;
text-align: left;
margin-right: auto;
margin-left: auto;
}


#Lcolumn
{
width: 90px;
float: left;
background-color: #FFFF66;
}

#Home
{
width: 600px;
margin-left: 100px;
float: left;
}

#Rcolumn
{
width: 60px;
float: right;
background-color: #00CC00;
margin-left: 750px;
}

#Footer
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
color: #FFFFFF;
font-weight: bold;
padding: 5px;
font-style: normal;
height: 18px;
margin: 0;
}
thanks
ituano
coothead
04-21-2007, 03:25 PM
Hi there ituano,

does this help...
<!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">

<style type="text/css">
#container {
background-color:#fc0;
width:790px;
text-align:left;
margin:auto;
}
#Lcolumn {
width:90px;
float:left;
background-color:#ff6;
}
#Home {
width:600px;
height:600px;
margin-left:10px;
float:left;
}
#Home img {
width:600px;
height:600px;
}
#Rcolumn {
width:80px;
float:left;
background-color:#0c0;
margin-left:10px;
}
#Footer {
clear:both;
height:18px;
padding:5px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
font-weight:bold;
color:#fff;
text-align:center;
}
</style>

</head>
<body>

<div id="container">

<div id="Lcolumn">left</div>

<div id="Home"><img src="images.gif" alt=""/></div>

<div id="Rcolumn">right</div>

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

</div>

</body>
</html>
coothead
ituano
04-21-2007, 04:15 PM
coothead
I had forgotten to insert the header in my first structure. I did try to insert a header tag but It is not proper place above the other div tags.


<div id="container">
<div id= "header"></div>
<div id="Lcolumn">left</div>

<div id="Home"><img src="images.gif" alt=""/></div>

<div id="Rcolumn">right</div>

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

</div>

CSS:
#header
{
margin-right: auto;
margin-left: auto;
width: 790px;
background-color: #3399FF;
}
coothead
04-21-2007, 04:29 PM
Hi there ituano,

here you go...
<!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">

<style type="text/css">
#container {
background-color:#fc0;
width:790px;
text-align:left;
margin:auto;
}
#header{
background-color:#39f;
}
#Lcolumn {
width:90px;
float:left;
background-color:#ff6;
}
#Home {
width:600px;
height:600px;
margin-left:10px;
float:left;
}
#Home img {
width:600px;
height:600px;
}
#Rcolumn {
width:80px;
float:left;
background-color:#0c0;
margin-left:10px;
}
#Footer {
clear:both;
height:18px;
padding:5px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
font-weight:bold;
color:#fff;
text-align:center;
}
</style>

</head>
<body>

<div id="container">

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

<div id="Lcolumn">left</div>

<div id="Home"><img src="images.gif" alt=""/></div>

<div id="Rcolumn">right</div>

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

</div>

</body>
</html>
coothead
ituano
04-21-2007, 04:38 PM
what is the Home img id for?
it was not used.
ituano
04-21-2007, 04:43 PM
the web page is not centralized.
In IE, Mozilla and Opera, the footer is centralized while the Home and RColumn are aligned to the left. The left Colum is hanging to the top left corner. The header is not visible.

ituano
coothead
04-21-2007, 04:53 PM
Hi there ituano,
what is the Home img id for?
It removes presentatation from the markup. ;)
the web page is not centralized.
In what browser?
In IE, Mozilla and Opera, the footer is centralized while the Home and RColumn are aligned to the left
Well, add text-align:center; where required. :rolleyes:
The left Colum is hanging to the top left corner.
I don't know what you mean. :eek:
The header is not visible.
In what browser?

coothead
aj_nsc
04-21-2007, 06:41 PM
ituano, you posted this thread twice, did you check your other thread? your solution is to just declare a doctype above your original code. your css was fine to begin with.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ituano
04-22-2007, 04:22 PM
What is the difference between this two doctype:
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

What I have noticed is that when I used the first doctype structure it centers the webpage but a javascript on the page does not display in IE and Mozilla.
However when I use the second doctype structure the web page is left aligned in IE and the javascript menu displays. In mozilla the page is centered and the javascript displays.
What I want is the page to be centrally positioned in the different browsers with the javascript menu displaying.
any suggestion
ituano