First in source

This is a layout that is fluid (100% width), has a height of 100% and rounded content corners.

The center/content column is fluid, but left and right column is fixed. The rounded content corners look is "faked" using background images in body, #mainContainer, #content, #left and two divs inside the footer. Border-top is added to #left, #content and #right.

For further information about how this layout is made, take a look in the source code.

What is this about?

This example page is belonging to the article Three column fluid CSS layout with rounded content corners and 100% height.

Related CSS articles and examples

Below are some articles and layouts that are related to these examples.

  1. The only CSS layout you need(?)
    1. Three column CSS layout - left and right menu. This is the basis layout for all the different layouts.
    2. Two column CSS layout - top and left menu
    3. Two column CSS layout - top and right menu
    4. Two column CSS layout - left and footer menu
    5. Two column CSS layout - right and footer menu
    6. Three column CSS layout: 100% height with footer. This layout is also using Faux columns.
    7. Three column CSS fluid layout: 100% width
    8. Three column CSS fluid layout: 100% width and with column borders
    9. Two column CSS layout - header and left menu
    10. One column CSS layout - top and footer menu