Posted By

blueocto on 01/11/11


Tagged

xhtml


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

qubestream


3 Columns, fixed width, content tallest


 / Published in: CSS
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html>
  5. <head>
  6. <title>3 columns, fixed width, content tallest</title>
  7. <style type="text/css">
  8. #container{
  9. background-color:#9cc;
  10. float:left;
  11. width:500px;
  12. border-left:150px solid #cf9; /* The width and color of the left rail */
  13. border-right:200px solid #c33; /* The width and color of the right rail */
  14. }
  15. #leftRail{
  16. float:left;
  17. width:150px;
  18. margin-left:-150px;
  19. position:relative;
  20. }
  21. #center{
  22. float:left;
  23. width:500px;
  24. margin-right:-500px;
  25. }
  26. #rightRail{
  27. float:right;
  28. width:200px;
  29. margin-right:-200px;
  30. position:relative;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="container">
  36. <div id="center">CENTER<br />COLUMN CONTENT</div>
  37. <div id="leftRail">LEFT RAIL</div>
  38.  
  39. <div id="rightRail">RIGHT RAIL</div>
  40. </div>
  41. </body>
  42. </html>

Report this snippet  

You need to login to post a comment.