HTML Autoresize "without notice" driving me bananas

Question

First of all, I am sorry for the informal title. I wished to express how I really feel about the issue. I've been cleaning up some things on my site, http://www.gfcf14greendream.com/, and through another question I was directed to this site to debug my html: http://validator.w3.org/ . I've tried it with my site, and have corrected a few errors, but I'm stuck with one, http://validator.w3.org/check?uri=gfcf14greendream.com&charset=%28detect+automatically%29&doctype=Inline&group=0 . As it says:

Line 72, Column 48: The width attribute on the td element is obsolete. Use CSS instead.
              <td width=200 style="vertical-align: top;">

But if I try to change this to <td style="vertical-align: top; width: 200;">, the text next to the fading pictures appears to ignore it and resize it self every time it changes, at times becoming too large to be displayed next to the pictures and instead appears below them. Why is there such a tendency to resize the elements, which at least in my case would mess up my layout? Isn't there a way to strictly specify a size and have the browser stick to it (I use chrome), regardless of anything else? I have tried most if not all types of css overflow, yet the text is always displayed on a single line. I've even tried giving the td that holds the text a height, thinking it would realize that with the extra height it would break the text in lines, but it is again resized to get the smallest height possible

If you notice that at the front there is some extra space at the bottom (there is a scroll bar but on an average size screen no need at all for it), it's because I had this problem before with the vertical menu on the left, for which I had to give a bigger height to display completely, again, because making it 100% of its size ruins its display because upon the browser (or whatever tool that does it) loading the site the menu is made smaller and not every button is seen properly. Please if anyone knows how to fix this (I'm really interested in being able to control the sizes of my html elements without browsers or other tools resizing them for me) let me know, thank you in advance for reading

Answer 1

You really shouldn't be using a table in your layout. There is no tabular data to display. Tables are (usually evil).

That said, apply this style:

#desc {width: 200px}
#wrap img {width: 400px;height: 350px;}

and removing the widths and heights on everything should work just fine.

Just an additional critique:

body {
  background-attachment: fixed;
  background-image: url("http://www.gfcf14greendream.com/images/greentwi.png");
  background-size: 100% 100%;
}

and remove your div#background, and img.