CSS Layout Generator

This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.
With thanks to CSS Portal for this CSS Layout Generator

DOCTYPE
LAYOUT
 

Alignment


Width
Page Width:
px
Width
Min Width:
px
Max Width:
px
HEADER
Height:
px
Background Color:
HORIZONTAL MENU
Height:
px
Background Color:
FOOTER
Height:
px
Background Color:
COLUMNS



Left Sidebar

Width:
px
Background Color:

Right Sidebar

Width:
px
Background Color:

Left Sidebar

Width:
px
Background Color:

Right Sidebar

Width:
px
Background Color:
EXTRAS

Main Content

Background Color:

Rounded Corners


Will also add a 1px border

How to Use?

The css layout generator will create the code necessary for the layout of a webpage.

  1. Start by selection the doctype and type of layour you would like to create.
  2. Next you you will have option to include a header, menu and footer.
  3. Following that you have the option of selecting if yu would like a sidebar(s) included.
  4. Finally select the background color for the main content of the layout.
  5. Once that is all down, click on 'Create Layout' for the code and a preview to be generated.