|
If you have used tableless CSS Div layout you probably know that sometimes it can be difficult to create multi browser compatible layout. This is due to the fact that some browser are not good at following web standards.
If you can master three main key concepts of CSS it becomes fairly easy to create a browser compatible layout. In this article I will go over the first of the three concepts:
- Positioning
- Floating and
- Margin manipulation.
Positioning: Centering a design
Personally I like a centered layout better then left aligned or full screen. It is easier to read and looks much nicer in different resolution monitors. Rather than spanning the full width of the screen, centered designs span only a portion of the screen, creating shorter and easier-to-read line lengths. There are two basic methods for centering a design:
- Using auto margins
-
Using positioning and negative margins.
To create a typical layout where you wish to center a wrapper div horizontally on the screen you can use the following code:
<body>
<div id="wrapper">
</div>
</body>
To do this you simply define the width of your wrapper div and then set the horizontal margins to auto:
#wrapper {
width: 800px;
margin: 0 auto;
}
You can easily set the width as a percentage of the body or relative to the size of the text using ems. This works on all new browsers. IE 5. x and IE 6 in quirks mode does not work with auto margins. IE misunderstands text-align: center, centering everything instead of just the text. You can use this to your advantage by centering everything in the body tag, including the wrapper div, and then realigning the contents of the wrapper back to the left. So here is the IE 5 and 6 hack that will align the wrapper centered and left align the texts:
body {
text-align: center;
}
#wrapper {
width: 800px;
margin: 0 auto;
text-align: left;
}
There is one additional hack that you will need to do in order for this to work in Netscape 6. When you reduce the width of the browser window the width of the wrapper on the left side overflows off the side of the page and cannot be accessed. To keep this from happening you can set the body element width equal to or slightly wider than the width of the wrapper element:
body {
text-align: center;
min-width: 860px;
}
#wrapper {
width: 800px;
margin: 0 auto;
text-align: left;
}
Now you can test the page again and you will be able to view the whole page by scrolling.
Centering a design using Positioning and Negative Margins
The auto margin method of centering is the most common approach, but it does involve using a hack to satisfy IE 5, IE 6 and Netscape as mentioned above. You can also achieve the same results by using positioning and negative margins. We will use the same starting point like before by defining the wrapper width. We will the set the position property of the wrapper to relative and set the left property to 50%. This will position the left edge of the wrapper in the center of the page.
#wrapper {
width: 800px;
position: relative;
left: 50%;
}
But that is not what we wanted to accomplish we wanted the middle of the wrapper centered. This is where we are going to use the negative margin to the left side of the wrapper, equal to half the width of the wrapper. This will move the wrapper half its width to the left, centering it on screen. So if you define your wrapper width at 700px your margin-left property will need to be set at 350px.
#wrapper {
width: 400px;
position: relative;
left: 50%;
margin-left: -400px;
}
Your choice of centering technique comes down to your stylistic requirements. That is it for the centering layouts. If you have any questions or comments feel free to post it in our forums section. You may also want to read the next article Create Browser Compatible CSS Layout Part 2
|