CSS DIV Layout (keeping a floating DIV from dropping below another div when a window is narrowed)

I have a layout template made to have a top banner, a left side menu and a content area to the right of the menu. I'm trying to figure out how to keep the 'application_layout_content' div from dropping below the 'application_layout_menu' if the browser window is narrowed. I'm not sure if I was doing this the right way to begin with; otherwise it seems to work fine.

(looking at IE7/IE8 mainly), I've played around with 'overflow' and 'position' properties but either will cause problems in one version or the other. Like 'Overflow: auto' will work in IE7 (main content div won't drop below the menu div), but in IE8 it will cause a greyed out vertical scrollbar and the main content div will still drop below the menu div.

Thanks!

#application_layout_header
{
    background-image: url('../hHeader.jpg');
    background-repeat: no-repeat;
    height: 103px;
}
#application_layout_menu
{
    width: 205px;
    float: left;
}
#application_l开发者_Go百科ayout_content
{
    float: left;
}

I don't think you can accomplish this as long as you have a fixed width defined for #application_layout_menu. Try making it a percentage value.

try setting a min-width on #application_layout_header