Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jul 17th, 2012  |  syntax: None  |  size: 2.73 KB  |  hits: 16  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Using CSS to create three boxes with dividers and text centered within each box
  2. h2 {
  3.     color: #00ADEF;
  4.     margin-top:0;
  5.     margin-bottom:0;
  6.     font-family:Arial, Helvetica, sans-serif;
  7.     font-size:20px;
  8.     font-weight:bold;
  9.     line-height:23px;
  10. }
  11.  
  12. p {
  13.     margin-top:0;
  14. }
  15.  
  16. .3colwrapper {
  17.     width: 930px;
  18.     margin: 0 auto;
  19. }
  20.  
  21. .colbox {
  22.     float:left;
  23.     margin: 10px;
  24.     width: 210px;
  25.     background:#DDD;
  26.     padding:10px 40px;
  27. }
  28.        
  29. <div class="3colwrapper">
  30.     <div class="colbox"><h2>Step One</h2>
  31.         <p>Sign up</p>
  32.     </div>
  33.     <div class="colbox"><h2>Step Two</h2>
  34.         <p>Verify</p>
  35.     </div>
  36.     <div class="colbox"><h2>Step Three</h2>
  37.         <p>Participate</p>
  38.     </div>        
  39. </div>
  40.        
  41. h2 {
  42. color: #00ADEF;
  43. margin-top: 0;
  44. margin-bottom: 0;
  45. font-family: Arial, Helvetica, sans-serif;
  46. font-size: 20px;
  47. font-weight: bold;
  48. /* [disabled]line-height:23px; */
  49. }
  50.  
  51. p {
  52.  
  53. margin-top:0;
  54. }
  55.  
  56. .3colwrapper {
  57.     width: 930px;
  58.     margin: 0 auto;
  59. }
  60.  
  61. .colbox {
  62. float: left;
  63. width: 210px;
  64. background: #DDD;
  65. border-right-width: medium;
  66. border-right-style: solid;
  67. margin-top: 10px;
  68. margin-bottom: 10px;
  69. padding-top: 10px;
  70. padding-right: 40px;
  71. padding-bottom: 10px;
  72. padding-left: 40px;
  73. }
  74.  p {
  75.  text-align: center;
  76.  }
  77.  
  78. <html>
  79. <body>
  80. <div class="3colwrapper">
  81. <div class="colbox"><h2>Step One</h2>
  82. <p>Sign up</p>
  83. </div>
  84. <div class="colbox"><h2>Step Two</h2>
  85. <p>Verify</p>
  86. </div>
  87. <div class="colbox"><h2>Step Three</h2>
  88. <p>Participate</p>
  89. </div>        
  90. </div>
  91. </body>
  92. </html>
  93.        
  94. h2 {
  95. color: #00ADEF;
  96. margin-top: 0;
  97. margin-bottom: 0;
  98. font-family: Arial, Helvetica, sans-serif;
  99. font-size: 20px;
  100. font-weight: bold;
  101. /* [disabled]line-height:23px; */
  102.    }
  103.  
  104.  
  105. p {
  106.  margin-top:0;
  107. }
  108.  
  109. .3colwrapper {
  110.     width: 930px;
  111.     margin: 0 auto;
  112. }
  113.  
  114. .colbox {
  115. float: left;
  116. width: 210px;
  117. background: #DDD;
  118. border-right-width: medium;
  119. border-right-style: solid;
  120. margin-top: 10px;
  121. margin-bottom: 10px;
  122. padding-top: 10px;
  123. padding-right: 40px;
  124. padding-bottom: 10px;
  125. padding-left: 40px;
  126. border-right-color: #000;
  127. }
  128.  
  129. .colbox1 {
  130. float: left;
  131. width: 210px;
  132. background: #DDD;
  133. border-right-width: medium;
  134. border-right-style: solid;
  135. margin-top: 10px;
  136. margin-bottom: 10px;
  137. padding-top: 10px;
  138. padding-right: 40px;
  139. padding-bottom: 10px;
  140. padding-left: 40px;
  141. border-right-color: #000;
  142. }
  143.  
  144. .colbox2 {
  145. float: left;
  146. width: 210px;
  147. background: #DDD;
  148.  
  149. margin-top: 10px;
  150. margin-bottom: 10px;
  151. padding-top: 10px;
  152. padding-right: 40px;
  153. padding-bottom: 10px;
  154. padding-left: 40px;
  155. border-right-color: #000;
  156.   }
  157. p {
  158. text-align: center;
  159.   }
  160. </style>
  161. </head>
  162.  
  163.  
  164.  
  165. <body>
  166. <div class="3colwrapper">
  167.   <div class="colbox"><h2>Step One</h2>
  168.  <p>Sign up</p>
  169.   </div>
  170.  
  171.  <div class="colbox1"><h2>Step Two</h2>
  172.  <p>Verify</p>
  173. </div>
  174. <div class="colbox2"><h2>Step Three</h2>
  175. <p>Participate</p>
  176. </div>        
  177. </div>
  178. </body>
  179. </html>
create a new version of this paste RAW Paste Data