title: inheriting from another css class
body: <p>I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.</p>
  
  <p>So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.</p>
  
  <p>Now i have a class for each of these containers, they can be called container_1 container_2 and so on.</p>
  
  <p>Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.</p>
  
  <p>So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:</p>
  
  <pre><code>.container_1 .rounded_corners .float_left
  {
  
  }
   .container_2 .rounded_corners .float_right
  {
  
  }
  </code></pre>
  
  <p>But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.</p>
  
  <p>So where am i going wrong with this?</p>
  
  <p>This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.</p>
  
  <p><a href="http://jsfiddle.net/ragebunnykickass/g3Zaz/" rel="nofollow">http://jsfiddle.net/ragebunnykickass/g3Zaz/</a></p>
  
  <p>The naming is a little different but you'll know what is meant.</p>
  
  <p>Thanks.</p>