[ Home | About | Reset ]
CSS box model generator
v0.06 beta 2014-09-20
Here you can generate HTML and CSS code for a chosen web page layout according to the box model. This is handy when you quickly need a web page design structure and if you, like me, do not use fancy web page editors. On the tech side of things, please note that the output is not responsive. Also, of course the dashed lines only are there to visualize the layout; you'll have to set the border to zero later on (outline is not used).

The dashboard is on top of the output, so just maximize your browser window if you do not see everything.
Welcome! Syntax for each line is: Vertical% Horizontal%:Name. Replace % value with asterisk (*) or name with dash (-) for auto assignment.

[13, [[700, 'header']]]
[399, [[14, 'x'], [542, 'display'], [13, 'y'], [92, 'menu']]]
[12, [[700, 'footer']]]
One Chess Simple Complex Wide 1234
Internal values (pixels)
Layout shortcode (%)

Direct link for this layout - with dashboard
Direct link for this layout - without dashboard
Download this layout as text file with HTML and CSS code.