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:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <style type="text/css">
  6.  
  7. div#container {
  8.   width: 800px;
  9. }
  10.  
  11. div#header {
  12.   background: #ff3300; 
  13.   height : 75px;
  14.   width: 800px;
  15. }
  16.  
  17. div#navCol {
  18.   background: #4a79a5; 
  19.   float : left;
  20.   margin-right: 15px;
  21.   min-height: 400px;
  22.   width: 160px;
  23. }
  24.  
  25. div#content {
  26.   background: #ffffff;
  27.   float: left;
  28.   min-height: 400px;
  29.   width: 500px;
  30. }
  31.  
  32. div#footer {
  33.   background: #cccccc;
  34.   clear: both;
  35.   margin-left: 175px;
  36. }
  37. </style>
  38. <title>Insert title here</title>
  39. </head>
  40. <body>
  41. <div id="container">
  42. <div id="header">Header</div>
  43. <div id="navCol">Navigation</div>
  44. <div id="content">Content</div>
  45. <div id="footer">Footer</div>
  46. </div>
  47.  
  48. </body>
  49. </html>
© 2004-2019 by midrange.com generated in 0.007s valid xhtml & css