Table Code leaving blank space on right of right image box

[footer2]

<style tyep="text/css">
.inner_cont{
display: block;
float: left;
width: 31%;
padding: 8px;
background-color: #000000;

}
</style>

<div class="container">
<div class="title-bar" style="text-align: center;"><h2>General</h2></div>
<div class="content" style="text-align: center;">
<div class="inner_cont" style="text-align: center;">
Content<br />
</div>

<div class="inner_cont" style="border-left: 1px transparent;border-right: 1px solid black; ">
Content<br />
</div>

<div class="inner_cont" style=" border-left: 1px transparent;border-right: 1px solid black;">
Content<br />
</div>
</div>
</div>
Can somebody tell me why this table code leaves blank space on the far right of the right image box? I have background set to black but it leaves it transparent for about a fourth of inch. All the images are the same size. Thank you.

[Kami]

link to your site?

[footer2]

talkbigfoot.freeforums.net/
He made the image bigger to try to cover the empty space but it's still showing at the corners. We want to make the image the same size as the others, eliminate that transparent strip at the far right end, and drop the images a little bit so they're centered in the boxes. Most important thing though is to eliminate that space. Thank you.

[Kami]

First off can you put it back to the image size you want it to be?  What I'm seeing is that there are actually two transparent squares due to the width of the image. I circled them in red for you.




If you fix that and are still seeing transparency after the images are all the same width, then I suggest to change this: width: 31%; to width: 33%;

[Tumbleweed]

footer2, Kami is right about switching that to 33% however testing it on my test site that puts the last div under the other two, probably due to the padding.

This is what I have to get it to work properly.

<style tyep="text/css">
.inner_cont{
display: block;
float: left;
width: 33%;
padding: 8px;
background-color: #ffffff;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;*/
}
</style>

And since 33% times the 3 boxes only equals 99% you want it to be 100% by adding 34% width to your middle div.

<div class="inner_cont" style="width:34%; border-box;border-left: 1px transparent;border-right: 1px solid black;">Content<br /></div>

[footer2]

Thank you both for your help. I'll put that in and see how it goes from there.

[footer2]

Worked perfectly