Posted By

blueocto on 01/11/11


Tagged

xhtml


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

qubestream


2 Columns, liquid, right rail, rail 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>2 columns, liquid, right rail, rail tallest</title>
  7. <style type="text/css">
  8. #container{
  9. background-color:#9cc;
  10. overflow:hidden;
  11. margin:0 100px;
  12. padding-right:150px; /* The width of the rail */
  13. }
  14. * html #container{
  15. height:1%; /* So IE plays nice */
  16. }
  17. #content{
  18. background-color:#9cc;
  19. width:100%;
  20. border-right:150px solid #c33; /* The width and color of the rail */
  21. margin-right:-150px; /* Hat tip to Ryan Brill */
  22. float:left;
  23. }
  24. #rail{
  25. background-color:#c33;
  26. width:150px;
  27. float:left;
  28. margin-right:-150px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="container">
  34. <div id="content">This is some content This is some content This is some content</div>
  35. <div id="rail">This is<br />the rail</div>
  36.  
  37. </div>
  38. </body>
  39. </html>

Report this snippet  

You need to login to post a comment.