Hello,
How can I position a <div> exectly in the middle (center) of the pages regardless of user's screen resolution?
thanks,
webtekieDo you mean center as in left-right - or do you mean top-bottom as well?hi... you can try making an id to a div like this...
#object {position:absolute; z-index:100; top:50%; left:50%;}
till someone else know how to put it exactly in the middleI need it in the center from left-right and top-bottomAh, ok...#object works. Thanks Siddan!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML401/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Center Element</title>
</head>
<body>
<div style="position:fixed;width:100%;height:100%;top:50%;left:50%;background-color:#cccccc;">
<div style="position:relative;width:200px;height:400px;left:-100px;top:-200px;background-color:#999999;"></div>
</div>
</body>
</html> seems to work in Netscape7/Firefox. Apparently, you need a bit of a hack (<!-- m --><a class="postlink" href="http://tagsoup.com/-dev/null-/css/fixed/">http://tagsoup.com/-dev/null-/css/fixed/</a><!-- m -->) to make IE do fixed positioning.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML401/strict.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>IE-Hacked Centering</TITLE>
<style type="text/css">
html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
</style>
</HEAD>
<BODY>
<!-- IE5.5, IE6, also works in FF, Netscape7 -->
<div style="position:absolute;width:100%;height:100%;top:50%;left:50%;background-color:#cccccc;">
<div style="position:relative;width:200px;height:400px;left:-100px;top:-200px;background-color:#999999;"></div>
</div>
</BODY>
</HTML>
How can I position a <div> exectly in the middle (center) of the pages regardless of user's screen resolution?
thanks,
webtekieDo you mean center as in left-right - or do you mean top-bottom as well?hi... you can try making an id to a div like this...
#object {position:absolute; z-index:100; top:50%; left:50%;}
till someone else know how to put it exactly in the middleI need it in the center from left-right and top-bottomAh, ok...#object works. Thanks Siddan!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML401/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Center Element</title>
</head>
<body>
<div style="position:fixed;width:100%;height:100%;top:50%;left:50%;background-color:#cccccc;">
<div style="position:relative;width:200px;height:400px;left:-100px;top:-200px;background-color:#999999;"></div>
</div>
</body>
</html> seems to work in Netscape7/Firefox. Apparently, you need a bit of a hack (<!-- m --><a class="postlink" href="http://tagsoup.com/-dev/null-/css/fixed/">http://tagsoup.com/-dev/null-/css/fixed/</a><!-- m -->) to make IE do fixed positioning.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML401/strict.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>IE-Hacked Centering</TITLE>
<style type="text/css">
html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
</style>
</HEAD>
<BODY>
<!-- IE5.5, IE6, also works in FF, Netscape7 -->
<div style="position:absolute;width:100%;height:100%;top:50%;left:50%;background-color:#cccccc;">
<div style="position:relative;width:200px;height:400px;left:-100px;top:-200px;background-color:#999999;"></div>
</div>
</BODY>
</HTML>