An Evened Margin Approach to Centering DIVs with CSS

As I said in the introduction, the logic that drives the evened margins approach is quite simple to grasp. It bases its functionality on specifying identical values (in percentage, pixels, ems, etc.) for the left and right margins of the DIV that needs to be centered. Period.

Even though this alignment method demonstrates a lot of common sense and relatively little “science,” it works remarkably well on many browsers. But, let’s wrap up our discussion of theory and see how the previous web page can be properly styled to look like a neat centered layout.

To do that, I’m going to code a set of CSS styles which will rely on the concept of “evened margins” for building this specific layout. Here they are:

body{

padding: 0;

margin: 0;

background: #999;

}

h2{

margin: 0;

font: bold 18px Arial, Helvetica, sans-serif;

color: #000;

}

p{

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

}

#header,#footer{

padding: 10px;

background: #ffc;

}

#wrapper{

margin-left: 100px;

margin-right: 100px;

}

#navbar{

padding: 10px;

background: #fff;

}

#navbar ul{

list-style: none;

padding: 0;

margin: 0;

}

#navbar li{

display: inline;

padding: 0;

margin: 0;

}

#navbar a:link,#navbar a:visited{

margin-left: 20px;

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

text-decoration: none;

}

#navbar a:hover{

background: #fc0;

}

#maincol{

clear: both;

padding: 10px;

background: #fff;

}

As you can see, the above CSS code is responsible for styling all the elements included in the sample web page created before, such as its header and footer sections, <h2> selectors and paragraphs, and the navigation bar. Nonetheless, the most relevant detail to notice here is how evened margins have been applied to the man wrapping DIV.

In this case, a value of 70px has been specified for the left and right margins of this DIV, centering the remaining elements on the web document. That was very easy to code and read, wasn’t it?

Okay, now that you hopefully understood how evened margins were utilized for constructing a centered, fixed design, it’s time to see how the prior styles can be attached to the pertinent structural markup, by means of one single (X)HTML file.

To see how this process will be accomplished, you’ll have to click on the link below and read the following section.