Images stretching my table cells...Dreamweaver

[will7]

Hi all,

Well, we're working on designing an Ebook for our ICT coursework and we've been told to use tables Guess what? I've ran into problems, now I know why I hate the things :lol:

Anyway, my layout is created with one table, seperated into colums and rows. Two rows at the top, one in the middle seperated into two columns to form a left-hand main content area and a right-hand extra navigational area and finally a footer row.

Now, I set the width of the right-hand column to 200px and the width of the left-hand to 550px making a total of 750px which is what the total width of the table is.

I can put text in and stuff fine, it all looks great and consistent. However, when I come to insert an image into the left-hand column (to fill up all the width of it) the cell seems to stretch further to the right and this makes the right-hand column smaller. This is irritating because when you change page you see shifts and stuff as the right-hand column moves back to its original width

I am just wondering why it's doing this and how I can stop it? Hope you guys understand what I'm saying, if you need any more info please ask I'm using Dreamweaver 8, by the way. I tried making the layout in CSS and there are none of these problems but the college uses Dreamweaver MX and the CSS layout looks well messed up in MX

Thanks and look forward to hearing from you;

Will.

 

[DN Tycoon]

Can you send me a link to download the pdf so I can take a look in DW myself?

 

[will7]

Yeah, OK. I've attached a .zip file and that's got all the site files in it, please, take a look. The image I'm trying to insert is the "instant_messaging_images.jpg" on "A_page1.html" at the bottom of the text - that'll make sense when you open the archive :lol:

Thanks,

Will.

 

[will7]

No-one can help?

 

[Colleen]

Will,

I was looking at your code. This is the problem, padding adds to the width. You have this padding specified for the left column:
padding:7px 7px 7px 7px

You then have the same specified for the right column:
padding:7px

A left and right padding of 7px each is now 14px.

The left column will have 14px taken for padding, causing it to only have 536px left; which is the width of instant_messaging_images.jpg

The right colum is now 200px, minus 14px for padding, so it ends up actually having a width of 186px plus the rest being used for padding.

Considering the whole thing is only 750px, all this padding is causing a problem. There's technically no room for it.

You have to reduce the image or rework your dimensions.

Currently:
Left: 550px+14px=564px
Right: 200px+14px=214px
Total: 778px

I hope I explained that well enough.