Before reading this tutorial, please read the
CSS beginners tutorial You may have seen sites where the page content will always stay in the center of the browser window no matter the size (www.csnation.net for example).
This is very easily achieved with css here is how:
Firstly create a div in your html code and give it an id, something useful like wrapper (since we want to incapsulate your content inside this div).
CODE
<html>
<head>
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
Next define a style in a css document for the wrapper div, make sure you set the margin to
0 auto , (the width can be of your choice)
CODE
#wrapper {
margin: 0 auto;
width: 700px;
}
Now create a new div
INSIDE the wrapper div, name it something useful like content
CODE
<html>
<head>
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="content"> Content Here </div>
</div>
</body>
</html>
Next define a new style for the content div in your css document, (the width can be of your choice)
CODE
#wrapper {
margin: 0 auto;
width: 700px;
}
#content {
width: 100%;
}
Now make sure all your content (including other div's) goes inside the
content div, your content will now always be in the middle of the browser window !
This post has been edited by xfodder: 30 Oct, 2006 - 11:10 PM
Align your page to the center of the browser window, with css
30 Oct, 2006 - 12:25 AM
| 