What is causing this random white space? - html

Question

I ended up setting the display properties of some div's in one of my designs to table/table-cell respectively to take advantage of the vertical-align text support. However, I now have some white-space that I'm struggling to make sense of.
My code (JsFiddle: http://jsfiddle.net/p8zw2/):
HTML
<div class="container">
<p>Test</p>
<div class="mytable">
<div class="tablecell">test</div>
<div class="tablecell">test</div>
<div class="tablecell">test</div>
</div>
<p>Test</p> </div>
</div>
CSS
.container { width: 100%; background-color: #ff0000; }
.mytable { display: table; background-color: #4d4d4d; width: 94%; padding-left: 3%; padding-right: 3%; }
.tablecell { display: table-cell; width: 33%; }
As you'll see on the jsfiddle, the red background now leaks at the right edge where it shouldn't. The 'mytable' div padding is 3% each side (6% total), so setting the width to 94% should ensure it fills the container.
Setting the display property back to 'block' makes it work as I'd expect, but then I lose my vertical-align functionality - so this proves it's down to the table display mode in one way or another.
I've tried all manner of disabling all other padding, margins and borders that might be causing it but have failed. Firebug/Chrome dev tools doesn't shed any more light on the issue.
I'm not looking for work-arounds (like line-height etc for vertically aligning text, I'd like to try and find out what the issue is with this specific code).
Have I missed something obvious/any ideas?

Answer 1

Reset the Margins of the body to 0px, then you need to remove the padding-left and padding-right from the .mytable class and add it to the .tablecell directly, lastly set the width of mytable to 100%. Modified CSS below;
.container { width: 100%; background-color: #ff0000; }
.mytable { display: table; background-color: #4d4d4d; width: 100%; }
.tablecell {
display: table-cell; width: 33%;
padding-left: 4%;
padding-right: 4%;
}
body{
margin:0 auto;
padding:0;
}
Jsfiddle example

Answer 2

*{margin:0;padding:0;}
add these lines of code on top of your style.css file , it will solve your problem this is cross browsers solution ,this is called css reset have a look here for details

Answer 3

I've updated you fiddle to use border-collapse:collapse. You need to read more about paddings in tables(no offense, just to get an ideea how to work with display:table and display:table-cell). Here's the http://jsfiddle.net/p8zw2/3/ . You need to add padding to first and third cell contents.

Answer 4

Your div is now behaving like a table: you cannot put a padding, and by default the cells are "spaced" from each other. This is why with a div of width 94% it looks like it's more.
You need to make the border collapsed and set the width of your div to 100%.
.mytable { display: table; background-color: #4d4d4d; width: 100%; border-collapse: collapse; }
It should work.

Answer 5

Most browsers have default margin for body element. Depends on the browser. Some have just padding, some just margin for the body.
Can you try this,
*{
margin:0;
padding:0;
}
Demo: http://jsfiddle.net/p8zw2/5/
body{
margin:0;
padding:0;
}
Demo: http://jsfiddle.net/p8zw2/2/

Answer 6

.tablecell{width:33%} is causing the problem.
33% * 3 = 99%, 1%is the gap.
I have given grey background to .container instead of .mytable and red background to p.
Try:
.container{width:100%;background-color:#4d4d4d;}
.mytable{display:table;width:94%;padding-left:3%;padding-right:3%;}
p{background-color:#f00;margin:0;padding:10px 0;}
Updated fiddle here.