Min-Width and IE

[kpikul]

I have 3 divs creating a 3 column site. I need for the div which contents the content of the site to have the ability to expand to fit whatever content is entered. Therefore, i have something like this.

#main{width:1000px}
#sideBars{min-width:150px}
#content{min-width:700px}

<div id=main>
<div id=sideBars>Some links</div>
<div id=content>Some CONTENT</div>
<div id=sideBars>Some links</div>
</div>


In Firefox this works wonderfully. The site side bars stay at 150px and the content says at 700px unless pushed out but what content.

In IE the side bars extent past 150px and the site becomes a mess.

How do you sync up IE with the way Firefox is behaving?

Much appreciated!

[kpikul]

Since Min-Width is useless in IE. Is there a way to get a div to expand to fit the content? I need this div to default to 620px but if the content is larger it needs to expand. In IE the only way i can get this div to default to 620px is to set a fixed width on it. But when i do so, and the content is larger then 620px it does not push the div out rather it sits on top of it with the content flowing past the right border.

Is there any solution to this?

[aj_nsc]

Why is min-width useless in IE? It's fully supported in IE7+

http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

Perhaps you may need to apply floating (or inline-block) styles to #sideBars and #content to get them to appear on the same line as each other. If I do this:

<div style="min-width: 150px;">
 some content
</div>

Then that div is still going to have a width of auto and take up the entire width of it's parent unless you apply other styles to it, such as display: inline-block which means it will wrap the width of it's widest content, and, if it's smaller than 150px, the container will then be set to 150px wide.