Creating a fixed width size layout – Version.1.
Synopsis This tutorial shows you the very basics of using CSS to build a fixed width single column layout.
Objectives To build a web page that has the following characteristics-:
- A width of 600px
- Centered page whatever the size of the browser window
- Text aligned to the left hand side of the page
Step 1.
Create a new html document. For ease use this blank document. Open it in a text editor i.e. Notepad or something like EditPlus or BBEdit.
Step 2.
In between the body tags create a new div called wrapper.
<body> <div id="wrapper">Hello World </div> </body>
Step 3.
In between the style tags in the head of the html document put :
<style>
#wrapper{
border: 1px solid red;
width: 600px;
}
</style>
Step 4.
To shift the block to the center add the following:
A new tag in the style:
body{
text-align: center;
/*shifts everything so it sits in the middle of
the open browser (IE hack).*/
}
To the wrapper style add:
/* undoes the above IE hack */ text-align: left; /* the correct way to center the wrapper div */ margin: auto;
View the final result
