Two column tableless design, content DIV wrapping floated menu

float div menu wrap two column css tableless

[csingsaas]

I have spent many hours working on a tableless design that works across most browsers. It is a lot more difficult than I bargined for. Right now, everything looks great in IE7. The problem arrises in IE6, the current version of Firefox (3.0.3), and the current version of Opera (9.60).

I am basically working on a 2 column layout, the column that is floated left is the menu. The column on the right is the main body of the page. There are also header and footer sections but they are not giving me problems. The problem is the way the text in the content wraps around the floated menu. I do not want this to happen. I've given the menu a height of 100% to combat this but it only solved my problem in IE7. The other browsers do not appear to make the DIV containing the menu 100%. Therefore, the DIV containing the text in the body of the page will wrap.

<snip>

Any advice that can be thrown my way would be great appreciated!

[edited by: swa66 at 7:33 pm (utc) on Oct. 17, 2008]
[edit reason] No personal URLs, per forum charter [/edit]

[swa66]

Instead of trying to make the menu tall, why dont you use margins on the main text and make them wide enough to be bigger than the floated menu ?

A tip: don;t develop in IE, it will set you on the wrong foot. DEvelop in any of the standards compliant browsers and fix IE issues at the very end in a conditional comment. It'll save you tons of time and frustration.