CSS Layout Generator

Layout Hints

These simple tips may save you from having to use complicated hacks on your site. Make sure to also check out the links in the Layout Hints box.

Column Padding

The box model is handled incorrectly by some browsers, which causes padding and borders to be added to an elements width. So applying padding directly to a column will change the way the widths are calculated and could mess up the floated columns. To get around this problem apply margin to the children of the column instead. #maincol p{margin:1em;}

Overflowing Content in Fluid Layouts

To avoid content escaping or overflowing the columns there are a couple of things you can do.

• Make sure the content fits within the column at different window sizes or resolutions, images and long text such as urls could be a problem here.
• Avoid setting fixed widths or 100% widths with margin, padding or borders on block level elements within the column (p, div, ul ).