CSS Positioning, want to make content's width fixed when window is resized.

Question

I have a div with two nested divs inside, the (float:left) one is the menu bar, and the right (float:right) should display whatever content the page has, it works fine when the window is at a maximum, but when i resize it the content is collapsed until it can no longer has any space, at which it is forced to be displayed BELOW the left menu bar, how can I make the width fixed so that the user may scroll when resized? (css width didn't work, i alternated between floating the right content and not), here is the code:

<div style="width:100%">
<div style="float:left; background:#f5f5f5; border-right:1px solid black; height:170%; width:120px;"></div>   
<div style="margin-right:2px;margin-top:15px; margin-bottom:5px; width:100%; border:1px solid #f5f5f5"></div> 
</div>

I only need to have this working on Interner Explorer for now.

Answer 1

Well, putting a width or min-width property is the way to go.

Now, without an example, or a link of the actual page, it's a bit tricky to answer.

Answer 2

Simply don't make the right div floating. Menu is already floating left of any other content. Just set a left-margin for the right div so the content in that div won't be wrapped around the floating div.

Answer 3

if the two divs are taking up 100% of the available width, could try to use percentage width and display: inline with a further div with a fixed min-width/width (boo IE) inside where required.

this is rather difficult without some HTML to go on

Answer 4

Your containing div should have a width wide enough to contain both inner div's

So if your two inner div's are 300px each and assuming you have no margin/padding on them then you should set the outer div to be 600px;

Answer 5

This should do it (container is the parent div containing that 2 divs):

.container {
    width: 1024px;
    display: block;
}

Answer 6

I'm a bit confused:
Fixed width means the width of a node will not change. Never. You say you want to scroll when the screen gets too small for your content, so I think you mean the exact oposite of fixed width.

If my assumption is right, you could as mentioned before go for the percentual widths. Watch out width the suggested "min-width" solution because it is not supported all that well.

<div id="container" style="width:100%">
    <div id="primaryNav" style="float:left; width:150px; background-color: Orange">someNav</div>
    <div id="content" style="margin-left: 10px; background-color: Red; overflow: auto;">
        loadsOfSuperInterestingContentI'mSuperSerious<br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        Seriously
    </div>
</div>

This should be pretty cross browser

Answer 7

You may want to set a width on the containing div and set your overflow property

#containing_div {
    width: 200px;
    overflow: auto;
}

Also use the min-width property on the page if that makes sense, however that CSS property doesn't really work with IE6, this is usually what I do in that situation (supporting Firefox, IE7, IE6, etc)

#container {
    min-width: 1000px;
    _width: 1000px; /* This property is only read by IE6, which gives a fixed width */
}