Kobashi Computing

Tonight I was working with a fixed width layout for my new blog and ran into a problem that I always happen to hit - varying height columns.

One solution to this is to create a background image that can be tiled repeatedly on the y-axes that is the same color background as the columns (usually white). This was described in the article faux columns by Dan Cederholm.

Another solution is to create a large background image that spans the typical size of a screen. It is then centered to give the appearance that it is part of the page. I use this technique on my Myspace layout backgrounds and currently (as of November 2008) here on Kobashi Computing.

The problem with these two approaches is that one really doesn't know the full width and height of the display device. If you don't make the image big enough, you will end up having empty space and the background-color is used as a replacement.

And what if you wanted the page to be slightly offset down from the top of the display device leaving a cool margin effect? With both approaches, it looks funny because what is left showing is the background image itself. As you scroll up and down it obviously looks liked you tried to fake it with a background image layered behind the page.

Tonight I ran into the problem that my outer container div required having a thick border around it:

#page {
width: 940px;
border: 8px solid black;
background-color: white;
font-size: 80%;
margin: 1em auto;
text-align: center;
}
.
.
etc.
.
.


What I was getting was a #page container div that had no height. So I then asked it to be a floated div:

#page {
width: 940px;
border: 8px solid black;
background-color: white;
font-size: 80%;
margin: 1em auto;
text-align: center;
float: left;
}


While that worked great, it caused a problem - the page container would not center itself. Immediately I Googled and came across the article Simple Clearing Of Floats by Alex Walker which resulted in the placing of an overflow:auto in my code:


#page {
width: 940px;
border: 8px solid black;
background-color: white;
font-size: 80%;
margin: 1em auto;
text-align: center;
float: left;
overflow: auto;
}


And lo and behold it worked. I tested this on Firefox 3, Opera 9.62, IE 7 and Google Chrome 0.2.149. Now my fixed page width layout is centered, has a nice margin offset at the top and bottom of 1em, and the columns in the layout don't have to be of equal height to do any fancy faux column tricks.