title: Overlapping CSS columns
body: <p>I have a small problem with overlapping columns. Basically I have 3 columns and the content in the middle column is overlap by the right column. I'm a css amatuer so I haven't been able to make the right column expand when the content in the middle column is bigger than usual. If I try to make the middle column wider then the right columns drops down and everything goes out of alignment.</p>
  
  <p>This is the css code:</p>
  
  <pre><code>#content {
   width:960px;
   margin:0 auto 20px;
   overflow:visible
  }
  
  .c_middle {
   width:960px;
   background: transparent url(../images/content_middle.gif) repeat-y top center;
  }
  .c_left { background: transparent url(../images/content_left.gif) repeat-y top center;}
  .c_right {background: transparent url(../images/content_right.gif) repeat-y top center;}
  .c_full {background: none;}
  
  #leftcolumn, #rightcolumn {
   float: left;
   width: 210px;
   margin: 0 10px 0 0;
  }
  
  #rightcolumn {
   margin: 0 0 0 10px;
  }
  
  div#maincolumn {
   float: left;
   width: 500px;
   padding:0 10px;
  }
  
  div#maincolumn_full {
   float: left;
   width: 960px;
   padding:0 0 10px;
  }
  
  div#maincolumn_left {
   float: left;
   width: 720px;
   padding:0 10px 10px;
  }
  
  div#maincolumn_right {
   float: left;
   width: 720px;
   padding:0 10px 10px;
  }
  </code></pre>
  
  <p>Thanks in advance.</p>