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, liquid width, content


 / 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, liquid width, content</title>
  7. <style type="text/css">
  8. body{
  9. margin:0 100px;
  10. padding:0 200px 0 150px;
  11. }
  12. #container{
  13. background-color:#9cc;
  14. float:left;
  15. width:100%;
  16. border-left:150px solid #cf9; /* The width and color of the left rail */
  17. border-right:200px solid #c33; /* The width and color of the right rail */
  18. margin-left:-150px;
  19. margin-right:-200px;
  20. display:inline; /* So IE plays nice */
  21. }
  22. #leftRail{
  23. float:left;
  24. width:150px;
  25. margin-left:-150px;
  26. position:relative;
  27. }
  28. #center{
  29. float:left;
  30. width:100%;
  31. margin-right:-100%;
  32. }
  33. #rightRail{
  34. float:right;
  35. width:200px;
  36. margin-right:-200px;
  37. position:relative;
  38. }
  39. #header, #footer{
  40. background-color:#ddd;
  41. margin-left:-150px;
  42. margin-right:-200px;
  43. clear:both;
  44. }
  45. </style>
  46. <style type="text/css">
  47. h2{
  48. margin:0;
  49. padding:5px;
  50. }
  51. #center h2{
  52. background-color:#222;
  53. color:#c33;
  54. }
  55. .menu{
  56. list-style-type:none;
  57. border:1px solid #444;
  58. margin:5px;
  59. padding:5px;
  60. }
  61. #leftRail h2{
  62. background-color:#c33;
  63. }
  64. #rightRail fieldset{
  65. border:1px solid #222;
  66. margin:5px;
  67. padding:5px;
  68. }
  69. .article{
  70. border:2px solid #444;
  71. margin:5px;
  72. padding-top:0;
  73. overflow:hidden;
  74. padding-left:102px;
  75. }
  76. * html .article{
  77. height:1%; /* So IE plays nice */
  78. }
  79. .article p{
  80. margin:0;
  81. }
  82. .article h3{
  83. background-color:#c93;
  84. margin:0 -5px 0 -102px;
  85. padding:5px;
  86. border-bottom:2px solid #444;
  87. }
  88. .articleContainer{
  89. width:100%;
  90. border-left:102px solid #699;
  91. margin-left:-102px;
  92. background-color:#fefefe;
  93. display:inline;
  94. float:left;
  95. }
  96. .articleContent{
  97. width:100%;
  98. float:right;
  99. border-left:2px solid #444;
  100. margin-left:-2px;
  101. position:relative;
  102. }
  103. .articleContent p{
  104. padding:5px;
  105. }
  106. .articleRail{
  107. float:left;
  108. width:100px;
  109. margin-left:-102px;
  110. border-right:2px solid #444;
  111. position:relative;
  112. }
  113. </style>
  114. </head>
  115. <body>
  116. <div id="header">This is the header</div>
  117. <div id="container">
  118.  
  119. <div id="center">
  120. <h2>Articles</h2>
  121. <div class="article">
  122. <h3>Article 1</h3>
  123. <div class="articleContainer">
  124. <div class="articleContent">
  125. <p>
  126. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  127. </p>
  128.  
  129. </div>
  130. <div class="articleRail">
  131. <ul>
  132. <li>This</li>
  133. <li>is</li>
  134. <li>nested</li>
  135. <li>rail</li>
  136.  
  137. <li>content</li>
  138. </ul>
  139. </div>
  140. </div>
  141. </div>
  142. <hr />
  143. <div class="article">
  144. <h3>Article 2</h3>
  145.  
  146. <div class="articleContainer">
  147. <div class="articleContent">
  148. <p>
  149. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  150. </p>
  151. </div>
  152. <div class="articleRail">
  153. <ul>
  154. <li>This</li>
  155.  
  156. <li>is</li>
  157. <li>too</li>
  158. </ul>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <div id="leftRail">
  164.  
  165. <h2>Menu</h2>
  166. <ul class="menu">
  167. <li><a href="#">Link Number 1</a></li>
  168. <li><a href="#">Link Number 2</a></li>
  169. <li><a href="#">Link Number 3</a></li>
  170. <li><a href="#">Link Number 4</a></li>
  171.  
  172. <li><a href="#">Link Number 5</a></li>
  173. <li><a href="#">Link Number 6</a></li>
  174. <li><a href="#">Link Number 7</a></li>
  175. <li><a href="#">Link Number 8</a></li>
  176. <li><a href="#">Link Number 9</a></li>
  177. <li><a href="#">Link Number 10</a></li>
  178.  
  179. <li><a href="#">Link Number 11</a></li>
  180. <li><a href="#">Link Number 12</a></li>
  181. <li><a href="#">Link Number 13</a></li>
  182. <li><a href="#">Link Number 14</a></li>
  183. <li><a href="#">Link Number 15</a></li>
  184. <li><a href="#">Link Number 16</a></li>
  185.  
  186. <li><a href="#">Link Number 17</a></li>
  187. <li><a href="#">Link Number 18</a></li>
  188. <li><a href="#">Link Number 19</a></li>
  189. <li><a href="#">Link Number 20</a></li>
  190. </ul>
  191. </div>
  192. <div id="rightRail">
  193.  
  194. <form action="#">
  195. <fieldset>
  196. <legend>Search</legend>
  197. <input type="text" name="dummy" /><input type="button" name="btn" value="Go" />
  198. </fieldset>
  199. </form>
  200. </div>
  201. </div>
  202.  
  203. <div id="footer">This is the footer</div>
  204. </body>
  205. </html>

Report this snippet  

You need to login to post a comment.