I've searched the forums and Google but I can't seem to find anything that works so far so I thought I would post on here (apologies if I have overlooked another thread which may solve my problem).

I know it's probably not best practice to use tables for laying out the page but at the moment I'm not confident enough with CSS to use that.

The problem I'm having is that I've got a table with the width set to 100% so that whatever the screen resolution/window size it will always expand to fill the browser. I've got a column on the left for the menu set to 150px which I would like to stay that fixed size if possible. This works fine in Firefox 2 but I've noticed that in IE 6 and 7 it seems to treat the column width as a percentage or something like that as when I resize the window, the column width changes.

(Ignore the empty iframe, I'm working on some content to go in there.)

Edit: When I get round to it I will take the CSS out of the page and put it in a seperate css file to tidy things up a bit but at the moment I found it easier to have it in there to see exactly what's happening and where

As a web-developer you don't have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you'll find many templates, which include basic (X)HTML/CSS-markup. You can start from there, learning and exploring the possibilities of CSS and modifying templates for your exquisite taste. Below you'll find a list of resources which offer free, gorgeous and valid CSS-based templates - usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers. Usually developers require a link to the site where the template was downloaded from. So before using these templates it might be useful to take a look at the license agreement the developer provides.

First of all, width="150px" is not correct. The width attribute takes a number (interpreted as pixels) or a percentage. Thus it should be width="150", without the 'px'.

Secondly, widths specified for table cells are only hints (minimum widths) as long as you use the automatic table layout algorithm, which is the default. Cells adapt to their content. You can get a better result with the fixed table layout algorithm, but that can only be achieved with CSS (table-layout:fixed), in which case you'd be much better off ditching the layout tables anyway.