By: Zoe Gillenwater

Page 4 of 4

Set for printing

Previous

Summary

Creating Liquid Columns

1. Position the div(s) that you want to appear on the side(s) of the screen prior in the (X)HTML source to the div that you want to appear in the center of the screen.
2. Float the selected div(s) and give them a width in whatever value you like.
3. Give the non-float div a margin on each side where a float sits that is equal or greater than the total screen width (declared width plus padding and borders) of the respective floats.
4. Add the Three Pixel Text Jog hack (summarized below).

Creating Fixed-Width Columns

For all of the following methods, follow steps 1 and 2 above, then perform one of the following final steps:

• Give the non-float div a margin on each side where a float sits that is equal or greater than the total screen width of the respective floats, and give the non-float a width.
• Give the non-float div a margin on each side where a float sits that is equal or greater than the total screen width of the respective floats, and wrap all the divs in a wrapper div and assign this wrapper a width.
• Float all the divs, either in the same direction or a mix of directions.

Eliminating the Three Pixel Text Jog

The Three Pixel Text Jog is only present between a float and an adjacent block that is not floated. If you float all your blocks, you will not encounter it.

To eliminate the bug when you have a float and an adjacent non-float that has a width assigned, do the following:

1. Assign a margin to the float on the side that the jog/gap appears that is three pixels smaller than you want the real margin to be.
2. Set the margin on the non-float on the side that the jog/gap appears to 0.

To eliminate the bug when the non-float does not have a width assigned, follow steps 1 and 2 above, then perform the following final step:

• Set hasLayout on the non-float by giving it a height or setting zoom to 1.

Page 4 of 4 Previous 1 2 3 4

Download Support Files

Downloads are disabled during your trial period.

Keywords
CSS, cascading style sheets, styles, styling, floats, floating, widths, margins, columns, layouts, liquid, fluid, fixed, Internet Explorer, IE Three Pixel Text Jog, 3px Gap, bugs, wrapping, divs