Image causing width problem

[alhermette]

I have a page that contains a table with three columns in it
Each column has its width defined in an external CSS stylesheet.

The middle column is 500px wide and this works fine for text. When I place an image in it however things start to go wrong. I have some images that I want to take up the majority of the width so I set them to 475px wide. This causes the middle column to expand, only by a fex pixels but it's noticable when the content of the page alters and images become visible.

Even if I set the width of the images to 400px the column still expands. At 300px it works just fine but for the life of me I can't see why I should have to have a 300px image to fit into a 500px space.

Does anyone have any idea what might be causing this strange behaviour?

[SevenCubed]

It would help if you pasted your html and css here so we can see it -- just the snippets that are involved, not all your code. Without seeing the code I can only think of margins and padding possibly being a factor but the difference of 200 pixels makes that seem unlikely. Also which browser? Have you tested it in various browsers? Have you validated your code? Have you explicitly defined the length and width in your css?

[tedster]

How about any default padding or margins for the elements involved? Whenever I have this kind of issue with a layout, there are always pixels getting into the mix that I forgot about.

[alhermette]

Here is the relevant HTML:

<table>
<tr>
<td class="left_side">
Some content that does not seem to cause a problem (mostly navigation menu
</td>
<td class="centre_content">
<h1>Title</h1>
<div id="Installation" style="display:none;">
<p>Some text that behaves exactly as expected</p>
<img src="/images/file.jpg" alt="blah blah" width="475" class="centre" style="border-width:0;" />
<p>Some text that behaves exactly as expected</p>
<img src="/images/file-2.jpg" alt="blah blah" width="475" class="centre" style="border-width:0;" />
<p>Some text that behaves exactly as expected</p>
<img src="/images/file-3.jpg" alt="blah blah" width="475" class="centre" style="border-width:0;" />
<p>Some text that behaves exactly as expected</p>
</div>
</td>
<td class="right_side">
<img src="/images/file-4.jpg" alt="blah blah" width="280" class="centre" style="border-width:0;" />
</td>
</tr>
</table>

And here is the CSS associated with the above:

td.left_side
{
vertical-align:top;
width:200px;
}

td.centre_content
{
vertical-align:top;
width:500px;
}

td.right_side
{
vertical-align:top;
text-align:center;
padding-top:50px;
width:300px;
}

img.centre
{
display: block;
margin-left: auto;
margin-right: auto;
}

I have tried adding zero margin and zero padding in most places that I can think of with no effect. I also took out the image centreing CSS in case the display: block was an issue, again with no effect.

The width of each image is defined within its tag as opposed to in the CSS stylesheet. I tried adding height as well but with no effect.

This happens in all browsers that I have tested so far IE8, Firefox and Chrome.

The page validates fine all except for a single javascript onclick event which I can't understand but will look at further. It's in a totally different area of thge page anyway.

The div that contains the images is set to display: none by defalut and javascript changes this to display: block when a user clicks a menu button - this is when you can see the centre column expand slightly.

[swa66]

What value does your javascript enter for the display property when it makes it visible again ?

What's the width of you table itself - does it have enough space or is it being squeezed by constraints ? In my experience tables have a mind of their own when it comes to width.

Try adding

* {
margin:0;
padding:0;
border:0;
}

to your CSS, does that change this behavior ?
(might do a lot of other things too: it removes a lot of the fluff that browsers add on their own)

To be honest: I gave up on abusing tables for layout when I learned CSS, as I discovered both of them together make it far more difficult than just CSS alone.

[alhermette]

What value does your javascript enter for the display property when it makes it visible again ?

display: block

What's the width of you table itself - does it have enough space or is it being squeezed by constraints ?

I hadn't defined a width but setting it to 100% made no difference. It is contained inside a div width = 1000px

Try adding

* {
margin:0;
padding:0;
border:0;
}

to your CSS, does that change this behavior ?

No change to the behaviour

[not2easy]

If you change

img.centre
{
display: block;
margin-left: auto;
margin-right: auto;
}

to

img.centre
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 475px;
}

That may handle it. From the closing slash on your images it looks like you are not using a doctype that would be paying any attention to width="475".

[swa66]

It is contained inside a div width = 1000px

So it is likely that the table is squeezed for width.
Try making the containing div wider (1100px or so), and see if you loose the dynamic resizing of the table.

[alhermette]

If you change

img.centre
{
display: block;
margin-left: auto;
margin-right: auto;
}

to

img.centre
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 475px;
}

Made no difference

From the closing slash on your images it looks like you are not using a doctype that would be paying any attention to width="475".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Is what is being used.

Try making the containing div wider (1100px or so)

OK that sorted it! Problem is I can't make the containing div that wide so I need a better understanding of what is going on so that I can decide on the best way to correct it.

The containing div is what defines the width of the website (1000px). The table in question sits directly within it without further nesting. So the question is if I were to fix the table width at 1000px what are the minimum dimensions I can have for the containing div without 'squeezing' the table?

It still seems strange to me that the text within the table does exactly what I expected. When I put an image in that is plainly not as wide as the text (as seen in a browser) it causes the table to suddenly think that it is not big enough. What is it that makes the image require 100px of free space either side?

[swa66]

The 1100px was just to be sure to eliminate the problem, just a few pixels will likely be enough to get rid of it.

You have all columns set to a width, and you have a container of the table that limits the outside of the table to the sum of the insides of its columns.

Easiest is to NOT set the width of one of the 3 columns and set the width of the table itself to 100%. As long as you do not try to put things in the columns then that don't fit in it, it should not resize dynamically anymore.

Note that there are quite a bit of things how to get a browser to layout a table. See [w3.org...] . Note that tables have different modes etc.

But tables should not be used for positioning other elements, it's much easier to do without and just use pure CSS instead of tables.

[alhermette]

Thank you for the help from all who contributed. I can see how to solve this now.

But tables should not be used for positioning other elements, it's much easier to do without and just use pure CSS instead of tables.

I'm sure that you are right - I have more to learn.