Search code examples
htmlcss-tables

Gap between table and div

I have 3 floated divs inside a td. Divs touch eachother with no gap just fine but there is a gap around either the table or td (looks like a 1px border). I have tried:

margin:0
padding:0
border: 0 
cellspacing: 0 
cellpadding: 0
border-collapse:collapse

Heres my jfiddle: http://jsfiddle.net/tcHKB/5/ I changed it to try and highlight the problem. You can't see the top gap but you can see the white gap on the right of the box that says "left" and on the left of the box that says "right"

Solution

  • The width property of the DIV doesn't match the cell's width.

    Relevant CSS:

    .MCmiddle{
    width: 732px;
}
#main_content_box{
   width: 730px;
}

    Either change the width of #main_content_box to 732px, or change the width of .MCmiddle to 730px.

    Fiddle: http://jsfiddle.net/tcHKB/7/