[ 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.
Messages
Welcome! Syntax for each line is: Vertical% Horizontal%:Name. Replace % value with asterisk (*) or name with dash (-) for auto assignment.
-----------

[20, [[627, 'topleft'], [110, 'language']]]
[39, [[254, 'logo'], [326, 'topmid'], [144, 'search']]]
[27, [[750, 'navigationbar']]]
[250, [[109, 'left'], [543, 'main'], [72, 'stuff']]]
[30, [[247, 'footer1'], [239, 'footer2'], [238, 'footer3']]]
[19, [[750, 'copyright']]]
Examples
One Chess Simple Complex Wide 1234
Input
Internal values (pixels)
Width
Height   
Layout shortcode (%)



topleft
language
left
footer1
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.