Overlapping CSS columns

Question

Hi,

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.

This is the css 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;
}

Thanks in advance.

Answer 1

It appears you're building a 960px project - why not use the 960 Grid System instead of reinventing the wheel? It would be a quick and painless way of eliminating any issues you're presently having with these columns.

<link rel="stylesheet" href="css/reset.css" /> 
<link rel="stylesheet" href="css/text.css" /> 
<link rel="stylesheet" href="css/960.css" />

<div class="container_12">
  <div class="grid_3 alpha">
    <p>Left Column</p>
  </div>
  <div class="grid_6">
    <p>Center Column</p>
  </div>
  <div class="grid_3 omega">
    <p>Right Column</p>
  </div>
  <div class="clear"></div>
</div>

Answer 2

Sort of hard to tell without your markup, but it seems that in some cases your width + margin + padding would exceed 960px horizontally. But again, without knowing how you have your markup nested, it's hard to tell.

And I agree with Jonathan Sampson -- no sense in reinventing the 960 grid system. If you get this to work, you'll inevitably still run into weird issues in some browsers if that's a concern to you. Why not just leverage other peoples' efforts who've already worked through all that.

Answer 3

Thanks for the quick answers guys. I will look into the 960 Grid system.