CSS Fixed / Liquid Layout Trick

When creating an HTML page there are various layouts like fixed, liquid, hybrid, or elastic. Each page has it’s pros and cons. Recently, we built a fixed layout that needed to be changed to a liquid layout. This would require rebuilding the entire site. We compromised to make a Fixed/Liquid Layout.

Pros: 
1.Maintains the design aesthetics.
2.The text remains readable and fixed.
3.The layout will appear identical in all browsers.
4.Easy to implement.

Cons:
1.A reader with a mobile phone will have to scroll laterally.
2.If the user increases the text size the text may render incorrectly.

Simple Steps to Achieving the Fixed/Liquid Layout Trick

To start you may use an existing site or build a new layout using HTML and CSS. Below is a Fixed Layout with a header, a main content area, and a footer. If you are using a preexisting Fixed Layout move the footer out of you main container or wrapper so it will expand with the browser.
Bare Bones Example: http://curiousm.com/blog/example/CuriousMindsLiquidTrick1

HTML Structure Fixed Layout:
<body>
<!–#container keeps the main content fixed–>
<div id=”container”>
<!–#header has a set height–>
<div id=”header”>
<!– end #header –>
</div>
<!–#mainContent light grey background–>
<div id=”mainContent”>
<!– end #mainContent –>
</div>
<!– end #container –>
</div>
<!–#footer is outside of the container so it will expand with the browser–>
<div id=”footer”>
<!– end #footer–>
</div>
</body>

 
Use very simple CSS to start to make sure your Fixed Layout works in all browsers.  
CSS Fixed Layout:
body  {
background-color:#333333;/*dark grey background*/
margin:0; /*margin and padding set to 0 brings the body up to the top of the browser*/
padding:0;
}

/*contains the #header, #mainContent*/
#container { 
width: 780px;  /*set width*/
margin: 0 auto;/*centers the main container*/
}

#header { 
background-color:#000000;/*black background*/
border-bottom:5px solid #FFFFFF;/*white border bottom of the header*/
height:150px;/*set height*/

#mainContent{
background-color:#CCCCCC;/*light grey background*/
height:500px;/*set height if you want the #mainContent area to change with the content remove the set height*/
}
 
#footer {
background-color:#FFFFFF;/*white background*/
height:20px;/*set height*/
}

 

THE BACKGROUND TRICK

1.First, style the header to the desired look. Then take a screen shot of the header. Press Command (Apple)-Shift-4. The pointer turns into a bull’s eye. Drag the bull’s eye over the header area.

2.Open the image of the header and crop it to the desired size. In this case 2px(width) by 155px(height). The width is small because it will be repeated horizontally. The cropped image should look like a slice of the header. Here is an example of the header background cropped:

Screen Grap > Cropped Background Image
Screen Grab > Cropped Background Image

3.Place the background image on the body using CSS.
body  {
background-image:url(../images/background.jpg); /*2px by 155px cropped image*/
background-repeat:repeat-x; /*repeated background image horizontal*/

background-color:#333333;/*dark grey background*/
margin:0; /*margin and padding set to 0 brings body up to the top of the browser*/
padding:0;
}

If completed correctly the layout will look like the below example in all browsers.
Bare Bones Example: http://curiousm.com/blog/example/CuriousMindsLiquidTrick2

For further styling add some more CSS and your good to go with a Fixed/Liquid Layout header and footer that works in all browsers.

Here are a few examples that use a similar layout:

  1. http://www.gomediazine.com/
  2. http://wefunction.com/
  3. http://www.octwelve.com/
  4. http://www.adbrite.com/

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.