CSS Positioning, you want the content width to be fixed when the window is resized.

Question

I have a div with two nested divs inside, (float: left) one is the menu bar, and on the right (float: right) should display the content containing the page, it works fine when the window is at maximum, but when I change it size, content is reset until it no longer has any space in which it will be displayed BELOW the left menu bar, how can I make the width fixed so that the user can scroll when resizing? (css width did not work, I alternated between floating right content, 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 need to work on Interner Explorer just now.

Answer 1

This should be done (the container is the parent div containing 2 divs):

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

Answer 2

You can set the width in the containing div and set the overflow property

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

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

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

Answer 3

Well, put the width or min-width property.

Now, without an example or link to the actual page, it is a little difficult to answer.

Answer 4

Just don't make the right div float. The menu is already floating to the left of any other content. Just set the left edge for the right div so that the content in this div is not wrapped around a floating div.

Answer 5

if two divs occupy 100% of the available width, they can try to use the percentage width and display: embedded with an additional div with a fixed minimum width / width (IE IE) inside where necessary.

This is pretty tricky if the HTML doesn't work

Answer 6

Your containing div should be wide enough to contain as internal divs

So, if your two inner divs are 300px each, and if you don't have a margin / padding, you should set the outer div to 600px;

Answer 7

I am a bit confused:
A fixed width means that the width of the 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 an exact possum of a fixed width.

If my assumption is correct, you could, as mentioned above, go to the percentage width. Inspect the width of the proposed "minimum width" solution because it is not fully supported.

 <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> 

It should be a pretty cross browser