two div left right with auto width - css

Question

<div id="leftdiv" style="background: yellow; min-width: 400px; max-width: 800px;">left content left content left content</div>
<div id="rightdiv" style="background: red; width: 250px;">right content right content right content</div>
I put the float: left in the left div max-width and min-width not working.
How can i fix this ?

Answer 1

Float right div must be before left coz it gives trouble in some version of ie
<div id="rightdiv" >right content right content right content</div>
<div id="leftdiv">left content left content left content</div>
CSS same as bot
#leftdiv
{
background-color:Yellow;
min-width:100%;
max-width:800px;
float:left;
}
#rightdiv
{
background-color:red;
width:250px;
float:right;
}

Answer 2

Move your right div before the left one:
<div id="rightdiv" >right content right content right content</div>
<div id="leftdiv">left content left content left content</div>
And now just float the right one:
#leftdiv {
background: yellow;
min-width: 400px;
max-width: 800px;
}
#rightdiv {
background: red;
width: 50px;
float: right;
}
Check this FIDDLE DEMO to see is that you want or not.
[!] I've reduce width of right element to see the result in my monitor. You can use the old one.

Answer 3

If you want one of 2 divs to shrink when the viewport is resized, it is wisest to either do as Andi Muqisth said, and use percentages to resize yourd divs, or make one the parent of the other, like so:
Demo: http://jsbin.com/ileyaf/4/edit
<div id="leftdiv">left content left content left content
<div id="rightdiv">right content right content right content</div>
</div>
#leftdiv {
background: yellow;
width: 100%;
}
#rightdiv {
background: red;
max-width: 250px;
float: right;
}

Answer 4

Float left seems working.. see this fiddle
<div id="leftdiv">left content left content left content</div>
<div id="rightdiv" >right content right content right content</div>
CSS
#leftdiv
{
background-color:Yellow;
min-width:100%;
max-width:800px;
float:left;
}
#rightdiv
{
background-color:red;
width:250px;
float:right;
}

Answer 5

if you specify left side div first then simply put
<div style="float:left">
</div>
<div style="clear:both">
</div>
<div style="float:right">
</div>
else if you specify right side div first there is no need of clear both
<div style="float:right">
</div>
<div style="float:left">
</div>