Background info
===============

I am building a site which displays pictures to its users. This site uses a table for the 'posts'.

The problem
===========

When I add the picture (or a div) to the table, it automatically resizes the column next to it. You can look at this fiddle. <http://jsfiddle.net/hsNpj/> The red DIV forces the column to the left of it to be smaller than its defined width. Weird. I thought that width means width and not 'width something like'. 

Here is the code to the CSS which should define the widht to 100px:

```
td.postopt
{
    background:#f6f6f6;
    width:100px;
    border-right:1px solid #666;
    height:100%;
}

```

Why does HTML&CSS do this? And how do I fix it?