CSS Menu Overlap

Hi folks,

I’ve recently re-designed my website to update the look and feel, which considerably changed the CSS/HTML of each page. I have a 2 column (fluid-fixed) template, but I have a problem when the content of the main column is too wide (for example, a large image).

At the moment, the content column keeps expanding but appears underneath the side column. Ideally, I’d like the side column to move out to the side (basically just being pushed out, rather than staying in a fixed position).

I’ve created a test page to demonstrate the problem:

[SIZE=2]http://www.pcreview.co.uk/forums/test.htm[/SIZE]

I’ve been working on this problem since launching the new design, but haven’t been able to get it working. The other 2 column CSS templates I’ve seen have the same sort of problem, but I’m sure there will be a way round this :slight_smile:

Any help would be most welcome!
Ian

use width:auto; Not going to fix your problem. Your only real problem here is that you have 1 long string “Thisisatest…This” Notice no spaces at all? Its like 1 big long word, its not going to break to a new line if its a constant string. Put in some actualy test conent.

Sorry, perhaps I didn’t explain it to well. I put in the one long word so that it wouldn’t break in to new lines on purpose. This is because there will sometimes be long URLs or large images posted on the forum that have the same effect - so I just want the right hand menu to be moved along to the right when this happens, rather than sit over the main content.

Ah I see. Sorry. Try:

 
<div id="wrap">
<div id="rightPanel" style="float:right:width:200px"></div>
<div id="content" style="margin-right:200px;"></div>
</div>

Just keep the margin of content the same as the width of the right panel. Unable to test though as Im at work. This should expand dynamically with it.

Thanks, I tried changing those values and now the right column menu just drops below the content now?

It looks like if I “display:table” to the body it renders how I’d like (in Firefox only?).

Display:table and other table display related values are not supported in IE7 an down, if those are the browsers giving you trouble :slight_smile: