Three column fluid CSS layout with rounded content corners and 100% height

There are many examples of rounded corners made with CSS, but not many (or none?) where the box with the rounded corner is used within a three column fluid layout with 100% height and footer. This article and the example page following the article shows a solution to this.

10/27/2006

28
  • Currently 3.64/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Three column fluid CSS layout with rounded content corners

Three column fluid layout with rounded content corners and 100% height and width is the long title on the example page, but even more words could have been added to describe this layout. The layout is also using faux columns (but not the "traditional" method since that method is only using one image, this example is using two faux columns images).

Behind left and right column there are repeating images to create the look. Since this is a layout with 100% height, one of the repeating images is added to the mainContainer div (faux right column), and the other repeating image is added to body (faux left column). Since we are using faux columns left and right column can't have a flexible width.

The rounded upper left look is made by using a background image in the left div, and the rounded upper right look is made by adding a background image to the content div. The rounded lower left and right look is made by adding background images in two empty divs placed in the footer.

This Three column fluid CSS layout with rounded content corners and 100% height is based on the same concept found in the article The only CSS layout you need(?) where ten different layouts are presented. Since we are adding two empty divs to the footer in this example to create the rounded corner effect, this example isn't included in The only CSS layout you need(?) article. But, the difference is only two empty divs.

You will find more information about how this layout is made in the source code on the example page.

The layout is tested in IE6, IE7, Opera 9.01, Firefox 1.5.07 and Safari 2.0.4.

What to be aware of

The layout will break if a image or a table wider than the screen is added to the content div, so this is something to be aware of. The use of min-width on the mainContainer div is therefor recommended (Note: Min-width is not supported in older versions of Internet Explorer, only the IE7 version supports this).

The fluid faux columns solution which is used will only work with a 100% height layout since one of the repeating images is placed in body.

Internet tools