Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on May 5th, 2012  |  syntax: HTML  |  size: 6.25 KB  |  views: 20  |  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. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3.   <head>
  4.     <title>Center # Test</title>
  5.     <style type="text/css">
  6.     .nc_large_box{
  7.         margin: 5px;
  8.         padding: 3px;
  9.         background-color: #b9b9b9;
  10.     }
  11.  
  12.     .nc_small_box_wrapperLeft{
  13.         width: 50%;
  14.         float: left;
  15.     }
  16.  
  17.     .nc_small_box_wrapperRight{
  18.         width: 50%;
  19.         float: left;
  20.         clear: left;
  21.     }
  22.  
  23.     .nc_small_box{
  24.         padding: 3px;
  25.         margin: 0px 5px 5px 0px;
  26.         background-color: #b9b9b9;
  27.     }
  28.  
  29.     .nc_notifications{
  30.         display: table;
  31.         width: 100%;
  32.         border-spacing: 0px 5px;
  33.         padding: 0px 5px;
  34.     }
  35.  
  36.     .nc_notification{
  37.         display: table-row;
  38.     }
  39.  
  40.     .nc_small_boxes{
  41.         margin: 5px 0px 0px 5px;
  42.     }
  43.  
  44.     .nc_head{
  45.         display: table-cell;
  46.         font-weight: bold;
  47.         padding: 3px;
  48.         background-color: #b9b9b9;
  49.     }
  50.  
  51.     .nc_text{
  52.         display: table-cell;
  53.         width: 100%;
  54.         padding: 3px;
  55.         background-color: #b9b9b9;
  56.     }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <div class="design_content_content">
  61.       <h2>
  62.         Headline
  63.       </h2>
  64.       <div>
  65.         <div class="nc_large_box">
  66.           <h3>
  67.             Headline
  68.           </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
  69.           diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  70.           erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
  71.           et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
  72.           Lorem ipsum dolor sit amet.
  73.         </div>
  74.         <div class="nc_large_box">
  75.           <h3>
  76.             Headline
  77.           </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
  78.           diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  79.           erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
  80.           et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
  81.           Lorem ipsum dolor sit amet.
  82.         </div>
  83.       </div>
  84.       <div class="nc_notifications">
  85.         <div class="nc_notification">
  86.           <span class="nc_head">headline_9:</span><span class="nc_text">Lorem
  87.           ipsum <span style="color:red;">dolor</span> sit amet</span>
  88.         </div>
  89.         <div class="nc_notification">
  90.           <span class="nc_head">headline_56789:</span><span class=
  91.          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
  92.           amet</span>
  93.         </div>
  94.         <div class="nc_notification">
  95.           <span class="nc_head">headline_9:</span><span class="nc_text">Lorem
  96.           ipsum <span style="color:red;">dolor</span> sit amet</span>
  97.         </div>
  98.         <div class="nc_notification">
  99.           <span class="nc_head">headline_uvw123456789:</span><span class=
  100.          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
  101.           amet</span>
  102.         </div>
  103.         <div class="nc_notification">
  104.           <span class="nc_head">headline_123456789:</span><span class=
  105.          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
  106.           amet</span>
  107.         </div>
  108.         <div class="nc_notification">
  109.           <span class="nc_head">headline_uvw123456789:</span><span class=
  110.          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
  111.           amet</span>
  112.         </div>
  113.         <div class="nc_notification">
  114.           <span class="nc_head">headline_123456789:</span><span class=
  115.          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
  116.           amet</span>
  117.         </div>
  118.         <div class="nc_notification">
  119.           <span class="nc_head">headline_456789:</span><span class=
  120.          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
  121.           amet</span>
  122.         </div>
  123.         <div class="nc_notification">
  124.           <span class="nc_head">headline_456789:</span><span class=
  125.          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
  126.           amet</span>
  127.         </div>
  128.       </div>
  129.       <div class="nc_small_boxes">
  130.         <div class="nc_small_box_wrapperRight">
  131.           <div class="nc_small_box">
  132.             <h3>
  133.               Headline
  134.             </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
  135.             diam nonumy eirmod tempor invidunt ut labore et dolore magna
  136.             aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
  137.             duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  138.             sanctus est Lorem ipsum dolor sit amet.
  139.           </div>
  140.         </div>
  141.         <div class="nc_small_box_wrapperLeft">
  142.           <div class="nc_small_box">
  143.             <h3>
  144.               Headline
  145.             </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
  146.             diam nonumy eirmod tempor invidunt ut labore et dolore magna
  147.             aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
  148.             duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  149.             sanctus est Lorem ipsum dolor sit amet.
  150.           </div>
  151.         </div>
  152.         <div class="nc_small_box_wrapperRight">
  153.           <div class="nc_small_box">
  154.             <h3>
  155.               Headline
  156.             </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
  157.             diam nonumy eirmod tempor invidunt ut labore et dolore magna
  158.             aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
  159.             duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  160.             sanctus est Lorem ipsum dolor sit amet.
  161.           </div>
  162.         </div>
  163.         <div class="nc_small_box_wrapperLeft">
  164.           <div class="nc_small_box">
  165.             <h3>
  166.               Headline
  167.             </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
  168.             diam nonumy eirmod tempor invidunt ut labore et dolore magna
  169.             aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
  170.             duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  171.             sanctus est Lorem ipsum dolor sit amet.
  172.           </div>
  173.         </div>
  174.         <div style="clear:both"></div>
  175.       </div>
  176.     </div>
  177.   </body>
  178. </html>
clone this paste RAW Paste Data