Question

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?

Answer 1

Set display:block;. This will force td to take the width specified.