div displaying below other rather than at side - tried a fix but won't work

Hello:

Sorry about asking designing questions, I'm trying to learn CSS by taking apart an old design and recoding it for my new requirements.

Basically I've got the design working (but with the same error/problem) in both Firefox and IE.

The problem is the the left menu is displaying correctly, but the content is displaying below it (the right width in). It should be displaying by the side.

I tried to fix the problem using position absolute, but this only made a different problem - making the footer ignore this section. I commented out this fix in the css just above the content class.

HTML URL: http://www.william-shakespeare.us/new.html
CSS URL: http://www.william-shakespeare.us/new.css


I'd be very very very grateful to anyone who can provide me with a solution that will work for all browsers

 

Should do it.

 

Thanks

It didn't seem to need display:inline though... Just adding float worked. Thanks again

 

Ah, actually this showed up another problem - or created one.

Now the left menu is going over the footer (I changed font size to show this).

 

Managed to fix myself by putting clear div before footer.

 

Sure, it'll work fine ( without display:inline; ) until you decide to add horizontal margins to a floated element and then get on DP and go "WTF" when the column drops right underneath in MSIE6 (if you even care about this browser - theres at least 1-2 double margin threads per day).