horizontally centered website
having trouble centering a web site
what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div
check out my example the "center1" div should appear inside the top light gray box but it dose not!
<!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/layertest.htm">http://www.thehopeandanchor.net/nypd/layertest.htm</a><!-- m -->
the code:
<!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" xml:lang="en" lang="en">
<head>
<title>redeem file</title>
<style type="text/css">
<!--
div#center1 {
/*position:absolute;*/
margin:0px auto;
top:10px;
width:600px;
height:47px;
background-color: #cccccc;
}
div#center2 {
position:absolute;
left: 50%;
margin-left: -300px;
top:80px;
width:600px;
height:47px;
background-color: #cccccc;
}
div#insidebit {
position:absolute;
left:50px; top:10px;
width:64px;
height:26px;
background-color: #eeeeee;
}
-->
</style>
</head>
<body>
<div id="center1">
<div id="insidebit">center1</div>
</div>
<div id="center2">
<div id="insidebit">center2</div>
</div>
</body>
</html>Easiest way I've found to center an element is to give it a fixed width and set the left and right margins to "auto".
div.centered {
width: 700px;
margin: 0 auto; /* top/bottom = 0, left/right = auto */
}All you should need to center your entire layout:
<!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" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-Mac: \*/
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
} /* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>
having trouble centering a web site
what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div
check out my example the "center1" div should appear inside the top light gray box but it dose not!
<!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/layertest.htm">http://www.thehopeandanchor.net/nypd/layertest.htm</a><!-- m -->
the code:
<!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" xml:lang="en" lang="en">
<head>
<title>redeem file</title>
<style type="text/css">
<!--
div#center1 {
/*position:absolute;*/
margin:0px auto;
top:10px;
width:600px;
height:47px;
background-color: #cccccc;
}
div#center2 {
position:absolute;
left: 50%;
margin-left: -300px;
top:80px;
width:600px;
height:47px;
background-color: #cccccc;
}
div#insidebit {
position:absolute;
left:50px; top:10px;
width:64px;
height:26px;
background-color: #eeeeee;
}
-->
</style>
</head>
<body>
<div id="center1">
<div id="insidebit">center1</div>
</div>
<div id="center2">
<div id="insidebit">center2</div>
</div>
</body>
</html>Easiest way I've found to center an element is to give it a fixed width and set the left and right margins to "auto".
div.centered {
width: 700px;
margin: 0 auto; /* top/bottom = 0, left/right = auto */
}All you should need to center your entire layout:
<!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" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-Mac: \*/
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
} /* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>