Recently in my stat logs I've been getting a lot of visitors coming from a search for "CSS Fixed Layout". Generally they've been hitting this post where I wrote about ___layouts. So I decided to take the time to put together a simple fixed CSS layout tutorial for those finding the site looking for it.
First, we'll start with the layout of the divs for the layout. For this example, I've chosen to take a standard type layout with a header, two columns and ending with a footer. The layout will be centered on the screen and the columns will have the appearance of being the same height.
HTML:
-
-
-
<h1>This is our site heading!
</h1>
-
</div>
-
-
-
</div>
-
-
-
</div>
-
<div id="page_foot"></div>
-
</div>
So there's our easy and simple layout. Because this is to show you how to do a fixed width CSS layout, we'll set the width at 770px. Let's get the CSS now...
CSS:
-
body {
-
margin: 0 0 25px;
-
padding: 0;
-
background: #333;
-
text-align: center; /* centers for IE */
-
}
-
#main_cont {
-
margin: 0 auto; /* centers for Firefox and others */
-
width: 770px; /* sets width of main container */
-
background: #fff;
-
background-image: url(bg-grey.gif);
-
background-attachment: scroll;
-
background-position: left;
-
background-repeat: repeat-y; /* these are for the illusion of equal height columns */
-
}
-
#page_head {
-
background: #777;
-
color: #fff;
-
height: 100px;
-
padding-top: 10px;
-
text-align: center;
-
}
-
#side_col, #main_col {
-
float: left; /* this places the side_col on the left of the page to place it on the right just change float: left to float: right */
-
}
-
#side_col {
-
width: 180px;
-
}
-
#main_col {
-
width: 570px;
-
padding: 10px;
-
}
-
#page_foot {
-
background: #777;
-
height: 15px;
-
clear: both;
-
display: block;
-
}
Now, for the extended columns you'll notice I used a background image in the main container image to create the illusion of equal height columns. This is only one solution to equal height columns using CSS.
Take a look at our example in action!
Please keep in mind that this example is not about the way it looks but to give you an easy example of how to achieve a fixed CSS centered layout.
