Can I move this DIV to the center of the page instead of 5% from the left of the page? Thanks...
<style type="text/css"><!--
#move{
position:absolute;
top:0px;
left:5%;
}
--></style>
</head>
<body>
<div id="move" >
Content etc ....
</div>Simply apply the rule margin: 0 auto to it and you should be all set. Though first make sure to remove the position: absolute rule and to assign a width (e.g., width: 50%).<body>
<div style="width: 12em; margin: 0px auto">
Content etc ....
</div>
</body>
EDIT: note to self: Take a typing class
I'm not getting it. The div stays at the left of the screen. I was hoping the div would center horizontally.
<style type="text/css"><!--
#move{
width: 50%;
margin: 0px auto;
}
--></style>
</head>
<body>
<div id="move" >
Content etc ....
</div>It's there, you just can't really notice it. Try applying a background color (e.g., background: #f00).
Now I get a red rectangle starting about 10 px from top and left.
<style type="text/css"><!--
#move{
width: 735px;
margin: 0px auto;
background-color:#f00;
}
--></style>
</head>
<body>
<div id="move" >
Content etc ....
</div>Works fine for me "as is" under Mozilla though it would be smart to use a strict DOCTYPE and correct markup so IE's quirks won't get the best of you.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#center {
width: 50%;
margin: 0 auto;
background: #eee;
padding: 5px;
border: solid #aaa 1px;
}
/*]]>*/
</style>
</head>
<body>
<div id="center">A horizontally centered element!</div>
</body>
</html>Thanks, that works. Now I will spend some time figuring out the script you sent.
Thanks again.
<style type="text/css"><!--
#move{
position:absolute;
top:0px;
left:5%;
}
--></style>
</head>
<body>
<div id="move" >
Content etc ....
</div>Simply apply the rule margin: 0 auto to it and you should be all set. Though first make sure to remove the position: absolute rule and to assign a width (e.g., width: 50%).<body>
<div style="width: 12em; margin: 0px auto">
Content etc ....
</div>
</body>
EDIT: note to self: Take a typing class
I'm not getting it. The div stays at the left of the screen. I was hoping the div would center horizontally.<style type="text/css"><!--
#move{
width: 50%;
margin: 0px auto;
}
--></style>
</head>
<body>
<div id="move" >
Content etc ....
</div>It's there, you just can't really notice it. Try applying a background color (e.g., background: #f00).
Now I get a red rectangle starting about 10 px from top and left.<style type="text/css"><!--
#move{
width: 735px;
margin: 0px auto;
background-color:#f00;
}
--></style>
</head>
<body>
<div id="move" >
Content etc ....
</div>Works fine for me "as is" under Mozilla though it would be smart to use a strict DOCTYPE and correct markup so IE's quirks won't get the best of you.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#center {
width: 50%;
margin: 0 auto;
background: #eee;
padding: 5px;
border: solid #aaa 1px;
}
/*]]>*/
</style>
</head>
<body>
<div id="center">A horizontally centered element!</div>
</body>
</html>Thanks, that works. Now I will spend some time figuring out the script you sent.
Thanks again.