October 6th, 2008
Design Blog
The Perfectly Centered Container For Tableless CSS
February 3rd 2006
Tableless CSS without Limits
When I first started learning how to code websites without the use of tables I stumbled across a problem that I couldn't figure out how to get just right. That problem was getting my websites perfectly centered with equal margins on either side with CSS that acted just the way a table does in HTML. With tables all I had to do was add the align attribute <align="center"> and the table I was floated perfectly in the center. The problem I encountered with CSS was that I could not get both the left and right sides to balance out the same when the browser was stretched and contracted to different sizes. All the tutorials I read all took the hard way around but I discovered a simpler solution.
The XHTML
The solution was a simple one. The first element in my tableless CSS website was the container. A container is nothing more then a <div> tag an id element associated with it. A container is used to position your website and set certain design aspect such as the width of the site, background color and surrounding borders.
<div id="container">
The body of your website
</div>
The reason we use an id over a class is because our container is only called once. Classes are intended to be used on elements that occur more then once on a page.
The CSS
By setting both the left and right margins to "auto" both the right and left sides of the container are automatically set to match each other. What this means is if your page width is 760 pixels wide the margins that are set to auto stretch to fill in the space between the left edge of the browser and the right edge of the browser. This pushes the container to the center.
#container
{
margin: 5px auto 0px auto;
width: 760px;
}
October 6th, 2008
Design Journal
15 Most Recent Blog Entries
The Perfectly Centered Container For Tableless CSSSwitching Keys For Values In PHP Arrays
Great Web Design Resource
By Month
March 2006 (1)February 2006 (2)
By Category
PHP (1)Design (1)
CSS (1)
