CSS positioning: DBNet case study
DBNet is a very simple site. I write this CSS tutorial only for beginners, like I am, in hope that simple but complete documentation may help starting up quicker than reading the thousands of pages what I did. For more information see the references section on the last page.
This is what we are going to make (click to enlarge):
The page will be fixed for 1024 pixels wide screen. (Stretching is better, and not harder, but this a a case study on a real project which required this width. If you have the opportunity, please make stretching pages with as less minimum width as possible.) The page contains 4 sections vertically and the content area has 3 columns layout. All the panels are centered if you open the browser to bigger size, background image is displayed on the empty areas. A little additional snow image had to be added to the top and the bottom, as the designer imagined.
Since this page was made for a CMS system, the content is getting displayed by the engine. I will try to be independent of that as much as possible, but sometimes you will see references to it.
For CSS positioning newbies (yes, you too!): The aim of CSS design is not „to make something fancy" or „to make what all the experts do" or „to make as new age requires". Most important in CSS, what non-css people does not understand: separate design and content.
Separating design and content means, that your HTML page contains nothing else than what your webpage wants to say. HTML will contain the complete structure of your page, like: „ I have a news block, this has news items, which consists of news title and description. The whole block has a title". Nothing else. It is not important, that the text is gray, the description is below the content, the group has a border, or that the news headers have a little arrow in front of them. That is just PURE design, while what you have in your html is PURE CONTENT and the SCTRUCTUTRE OF THE CONTENT.
Please note, that I did not test this page with older browsers. Users should upgrade. The resulting page has been tested on: Mozilla/Firefox/Konqueror/Opera for Linux, and IE6 for Windows.
Standard? What standard?
See the references for details, but the first thing to do with CSS design is to switch all browsers to standard compilant strict mode. Especially Microsoft IE likes to handle the whole block model completely different if you do not do this. Document's first line is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Background and surrounding area
The page body margin and padding must be removed (some browsers default to a little margin there) and we create a whole page size div directly in the body element for some additional settings.
<body class="theme-pagebg">
<div class="theme-pagecontainer">
Their CSS coding:
body.theme-pagebg
{
background: white;
margin: 0px;
padding: 0px;
}
div.theme-pagecontainer
{
width: 100%;
background-image: url("background.gif");
}
There you can see the background color, which will be visible below the white snow if the page is not enough long, and the background image for the surrounding area. Note, that „url()" in this format (without absolute path or complete URL) refers to images in the directory of the CSS file itself! (Not to images from your currently loaded HTML file's directory!)
Center the content panels
All content panels are just simple div elements. All have the same code for making them the same width and the centered position.
div.theme-bannercontainer
{
margin-left: auto;
margin-right: auto;
margin-bottom: 8px;
width: 963px;
background-color: white;
border: 1px solid green;
border-color: #ce8585 #260000 #260000 #ce8585;
}
div.theme-bannercontainer a img, div.theme-bannercontainer img
{
border-width: 0px;
display: block;
}
The „margin-left:auto;", „margin-right: auto;" and „width:" tags make the panel centered in the containing block. As you see on the design, all these blocks have a little „margin-bottom: 8px;" to make some space before the next block, and all of them have a „3d colored border": „border-color: #ce8585 #260000 #260000 #ce8585;" (green value is only for testing ;-) )
The images in Mozilla are not correctly blocked when they are alone in a div, there is a little margin for them at the bottom of the image. That is removed by the „display: block;" value, as well as the linked image's „nice blue border" is removed by „border-width: 0px;".
This is not CSS basics guide, but note the class definition „div.theme-bannercontainer img" which means, any images directly in a div which has the mentioned class. On our system some banners have no link and some have, thus we fix both.
Top snow and bottom snow; It's wintertime
The little snow at the top and the bottom are not directly part of the content, but required a separated div tag which can hold them. The div is 100% wide, has the snow images as background, and to create the exactly height required I've also put the same image inside them, with fixing the „display: block;". Thus what you see there is the image and on the left it is repeating again. The bottom of the page continues in white color if the content is too short.
div.theme-bottomsnowcontainer
{
width: 100%;
background-image: url("snow_bottom.gif");
background-repeat: repeat-x;
}
<div class="theme-bottomsnowcontainer">
<img src="images/snow_bottom.gif">
</div>
This is definitely a little problem in the „HTML=content only" theory. Let's fix this in the summertime next year.
Layout columns with negative margins
The content area is similar as written in „Center the content panels", but it has much more complex internals than an image.
<!-- main area -->
<div class="theme-maincontainer">
<div class="theme-centercontainer">
<div class="theme-centercontent">
<!-- article -->
<div class="fp-wrapper">
<div class="theme-centercontent-fp">
<% call ContentModObj.Draw() %>
</div>
</div>
<!-- right blocks -->
<div class="theme-rightcontainer">
<% call wps_draw_blockgroup("rightblocks") %>
</div>
</div>
<div class="clearing"> </div>
</div>
<!-- left blocks -->
<div class="theme-leftcontainer">
call wps_draw_blockgroup("leftbanners")
</div>
<div class="clearing"> </div>
</div>
The structure is pretty straightforward, exactly matching what you see on the first image, the only „strange" thing you may notice, is that the content comes first, then right block (they are nested together in „div.theme-centercontainer") and the left blocks are the last.
„div.theme-maincontainer" has the same tags as „Center the content panels" describes, that makes it a fixed width centered. „div.theme-centercontainer" is floated right and has -175px left margin to make space for the left area. Please note, that floated blocks in CSS do overlap, thus you need margins to avoid the content overlapping the other block.
div.theme-centercontainer
{
margin-left: -175px;
float: right;
width: 100%;
}
div.theme-centercontent
{
margin-left: 175px;
}
The left block container will just float to the left, and be 175px wide.
div.theme-leftcontainer
{
width: 175px;
float: left;
background-color: white;
}
This creates a two column layout, the left area is 175px wide, floated left (marked green on the image), the right area is floated right and 100% wide (marked red), but inside there is a content holder with 175px left margin to avoid overlapping (marked yellow-black). (The green area IS NOT inside the red, it is just for the illustration! They do overlap.)
Adding the third column
The third column is nothing more than recursing the same tech into the created big right content area (div.theme-centercontent).
div.fp-wrapper
{
float: left;
width: 100%;
margin-right: -205px;
}
div.theme-centercontent-fp
{
margin-right: 205px; /* right block widht + padding */
padding: 5px 15px 5px 15px;
}
div.theme-rightcontainer
{
width: 205px;
float: right;
}
(This „fp" naming convention here shows that this is my „front page" layout. Some other sites have 2 column layout in content pages (without right blocks), thus this part can be removed from those. „div.fp-wrapper" is violet on the image, the margin defined by „div.theme-centercontent-fp" is yellow-black, but please note that this div block has the same extents as „div.fp-wrapper". „div.theme-rightcontainer" is blue. (This is not nested in the other, just for the illustration. The left and right floated areas do overlap.))
If you need margins for the content, you can use „padding" on div.theme-centercontent-fp class on the top, bottom and left side, while you can also increase the right-margin to separate content from right blocks.
Bottom of the longest float
The floated block elements do not expand their container's height. This causes problems very often, for example when you must put other content below them, use the later described background colors or you want to add borders. There we add clearing.
<div class="clearing"> </div>
div.clearing {
height: 0px;
clear: both;
}
This very simple tag will make the browser „wait" on both left and right side to end the content, and then it will display the next block or block end.
Color background for left or right blocks
This is no magic, yes it is. I did not have colors on this site, but you may need on others. The tech you will use is called „faux-columns". There is a problem we did not explain but you will definitely face: if content is longer than left column, your „div.theme-leftcontainer" ends before your content+right block area, thus setting a background to this block will not flow down to the end of the page. Same applies to right block or the content area.
If you add the clearing tags, you can always be sure that your surrounding blocks (divs) will be the size of the longest contained block, let it be left or right floated. Thus, for instance if you need a blue background for the left side blocks, all you need is a 175px wide and 10-20 pixels high blue image (background image) and set that to be the background of the block containing both columns.
div.theme-maincontaner
{
background-image: url("fauxcolumn-blue175px.gif");
background-repeat: repeat-y;
}
Could it be more simple? If you also want to add some dotted separator lines, you can also use the background tags of the blocks, note the important: „background-repeat" and „background-position" tags. Make sure you add a little padding to the block to avoid the content overlapping your background image. Example:
div.theme-leftcontainer
{
background-image: url("dotted-vertical-line.gif");
background-position: 3px 0px;
padding-left: 5px;
}
Those arrows are not content, just design
The last lesson is the smallest detail, the little arrows in the news block. Since they are just design elements, the best option is to add them from the stylesheet and avoid an additional IMG from the content, which has no semantical or structural meaning.
<div class="theme-rightblock">
<div class="theme-rightblock-title">News</div>
(All modules on this side are in „div.theme-rightblock", they have a „div.theme-rightblock-title" (if title was specified) and a „div.theme-rightlbock-contents" where modules draw the CMS contents.)
div.theme-rightblock-title
{
background-image: url("block_arrow.gif");
background-repeat: no-repeat;
background-position: 3px center;
padding-left: 15px;
font-weight: bold;
color: black;
}
This stylesheet adds the little arrow to the block title area and specifies 15px left padding to push the text away from the image. No more little nested tables to hold these 2 simple elements, what do you think?
References
Creating Liquid Layouts with Negative Margins by Ryan Brill 
Faux Columns by Dan Cederholm
Google about IE box model
Update: 2004/11/23 There was a mistake in clearing's description.
Ferenc Veres
software developer. Read more:
about me.
My C64 and Plus/4 book collection (Hungarian):
Commodore könyvek
