29Oct/0914
Basic CSS layout
The basic CSS layout I use in my work is plain simple - header, sontent, sidebar and footer.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My page</title>
<base href="http://localhost/" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
<div class="clr"></div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
And the CSS is very simple:
#wrap { width: 960px; margin: 0 auto; }
#header { }
#content { width: 700px; float: left; }
#sidebar { width: 260px; float: right; }
#footer { }
.clr { clear:both; height:0px; overflow:hidden; }
This is it. This code will show a simple page which is ready for hardcore modification. I know this is pretty basic yet it is one of the most used code snippets in my IDE. Good luck!