midrange.com code scratchpad |
Name:
DIV Layout
|
Scriptlanguage:
Plain Text
|
Tabwidth:
4
|
Date:
06/10/2009 11:27:54 pm
|
IP:
Logged
|
|
Description:
This is a simple layout HTML tableless layout. Remember the key is in the container. The total of the the width of the navCol minus the width of the content including padding and borders should be less than or equal to the width of the container.
|
Code:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
- <style type="text/css">
-
- div#container {
- width: 800px;
- }
-
- div#header {
- background: #ff3300;
- height : 75px;
- width: 800px;
- }
-
- div#navCol {
- background: #4a79a5;
- float : left;
- margin-right: 15px;
- min-height: 400px;
- width: 160px;
- }
-
- div#content {
- background: #ffffff;
- float: left;
- min-height: 400px;
- width: 500px;
- }
-
- div#footer {
- background: #cccccc;
- clear: both;
- margin-left: 175px;
- }
- </style>
- <title>Insert title here</title>
- </head>
- <body>
- <div id="container">
- <div id="header">Header</div>
- <div id="navCol">Navigation</div>
- <div id="content">Content</div>
- <div id="footer">Footer</div>
- </div>
-
- </body>
- </html>
|
|
|