CODEWITHSUNDEEP
csshtml
Kadir Çetintaş
Kadir Çetintaş

Reputation: 207

two div left right with auto width

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

Upvotes: 2

Views: 15835

Answers (5)

webketje
webketje

Reputation: 10966

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

Upvotes: 2

Randhi Rupesh
Randhi Rupesh

Reputation: 15060

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>

Upvotes: 0

user1823761
user1823761

Reputation:

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.

Upvotes: 4

user2389411
user2389411

Reputation: 220

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

Upvotes: 4

bot
bot

Reputation: 4911

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

Upvotes: 0

Related Questions