by
3
7
429k
12
Top 1% !
Popular
Pearl of Wisdom
Tagged
Easy-to-find
Specified
OpenSource
Popularity: 1797th place

Published on:

LanguageHTML
LicenseMIT_X11

HTML header - footer layout using CSS and DIV

This code renders a HTML basic layout with header, main and footer contents.
The main content has 2 columns and the right one contains two rows.

Source: http://stackoverflow.com/questions/6778808
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/36755/HTML-header---footer-layout-using-CSS-an?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
<html> <head> <style type="text/css"> #maincontent { width:950px; height:100%; margin:0 auto; } #header { width:946px; height:150px; border:#000 solid; border-width:2px 2px 1px 2px; } #leftcolumn { width:395px; height:703px; border:#000 solid; border-width:1px 1px 1px 2px; float:left; } #toprow { width:549px; height:351px; border:#000 solid; border-width:1px 2px 1px 1px; float:left; } #bottomrow { width:549px; height:350px; border:#000 solid; border-width:1px 2px 1px 1px; float:left; } #footer { width:946px; height:150px; border:#000 solid; border-width:1px 2px 2px 2px; clear:both; } </style> <body> <div id="maincontent"> <div id="header">Header Content</div> <div id="leftcolumn">Leftcolumn Content</div> <div id="toprow">Toprow Content</div> <div id="bottomrow">Bottomrow Content</div> <div id="footer">Footer Content</div> </div> </body> </html>
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus