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

Untitled

By: a guest on Mar 8th, 2013  |  syntax: None  |  size: 3.47 KB  |  views: 25  |  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. <div style="clear:both"></div>
  2.        
  3. #section{
  4.     width: 560px;
  5.     float: left;
  6.     font-size: 0.8em;
  7.     position: relative;
  8. }
  9. .dl .dd h4{
  10.     font-size: 0.9em;
  11.  }
  12. .dl h4 a{
  13.     text-decoration: none;
  14.     font-weight: normal;
  15. }
  16. .dl h4 a:hover{
  17.     text-decoration: underline;
  18. }
  19. .dl .dt{
  20.     float: left;
  21.     width: 100px;
  22.     height: 75px;
  23.     font-size: 0.5em;
  24.     margin: 0 0 5px 0;
  25. }
  26. .dl .dd{
  27.     width: 480px;
  28.     float: right;
  29. }
  30. .dl .wrapper { /* new element added */
  31.     overflow: hidden;
  32.     height: 100%;
  33.     padding: 10px 0 5px;
  34. }
  35. .dl .dd p{
  36.     font-size: 0.7em;
  37.     font-style: italic;
  38. }
  39.  
  40.  
  41. /* No need of this code
  42. .dl:after,
  43. .dl .dt:after,
  44. .dd:after,
  45. .dl .dt img:after
  46. {
  47.     content:"";
  48.     height: 0;
  49.     clear: both;
  50.     display: block;
  51. }
  52. */
  53.        
  54. <div class="dl">
  55.   <div class="wrapper">
  56.       <div class="dt"><img src="/news_pics/16.jpg" alt="pic 1" width="100px" height="75px"/> </div>
  57.       <div class="dd"><p>12 06 2012</p><h4><a href="#">News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf</a></h4></div>
  58.   </div>  
  59.   <div class="wrapper">
  60.       <div class="dt"><img src="/news_pics/16.jpg" alt="pic 2" width="100px" height="75px"/></div>
  61.       <div class="dd"><p>21 05 2012</p><h4><a href="#">News 2 title</a></h4></div>
  62.   </div>
  63.   <div class="wrapper">
  64.       <div class="dt"><img src="/news_pics/16.jpg" alt="pic 3" width="100px" height="75px"/></div>
  65.       <div class="dd"><p>19 05 2012</p><h4><a href="#">News 3 title title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf</a></h4></div>
  66.   </div>
  67.   <div class="wrapper">    
  68.       <div class="dt"><img src="/news_pics/16.jpg" alt="pic 4" width="100px" height="75px"/></div>
  69.       <div class="dd"><p>8 05 2012</p><h4><a href="#">News 4 title</a></h4></div>
  70.   </div>
  71.        
  72. .dl .dd p{
  73.    width: 210px; //changed
  74.     font-size: 0.7em;
  75.     font-style: italic;
  76. }
  77.        
  78. <div class="fix_float">
  79.    <dt>
  80.       date content
  81.    </dt>
  82.    <dd>
  83.         text content
  84.    </dd>
  85. </div>
  86.        
  87. enter code here
  88.        
  89. <ul class="ul">
  90.     <li class="li">
  91.         <img src="/news_pics/16.jpg" class="thumb" width="100" height="75">
  92.         <div class="text">
  93.             <p class="date">
  94.                 12 06 2012
  95.             </p>
  96.             <h4>
  97.                 <a href="" class="title">
  98.                     News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf
  99.                 </a>
  100.             </h4>
  101.         </div>
  102.     </li>
  103.     <li class="li">
  104.         <img src="/news_pics/16.jpg" class="thumb" width="100" height="75">
  105.         <div class="text">
  106.             <p class="date">
  107.                 12 06 2012
  108.             </p>
  109.             <h4>
  110.                 <a href="" class="title">
  111.                     News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf
  112.                 </a>
  113.             </h4>
  114.         </div>
  115.     </li>
  116. </ul>
  117.        
  118. .ul {
  119. margin: 0;
  120. padding: 0;
  121. list-style: none;
  122. }
  123. .li {
  124. overflow: hidden;
  125. margin-bottom: 5px;
  126. }
  127. .thumb {
  128. float: left;
  129. width: 100px;
  130. height: 75px;
  131. }
  132. .text {
  133. margin-left: 120px;
  134. }
  135. .title {
  136. font-size: 0.9em;
  137. text-decoration: none;
  138. font-weight: normal;
  139. }
  140. .title:hover {
  141. text-decoration: underline;
  142. }
clone this paste RAW Paste Data