CSS Auto resize div to fit container width

Question

I have two  lt div gt   left and contents  These two are inside wrapper div that has min-width 960px   left has fixed width  but I want to make content flexible with min width of 700px and if screen is wider  stick it to the right bound of screen    CSS    wrapper       min-width 960px      margin-left auto      margin-right auto     left       width 200px      float left      background-color antiquewhite      margin-left 10px     content       min-width 700px      margin-left 10px      width auto      float left      background-color AppWorkspace      JSFiddle  http   jsfiddle net Zvt2j

User · Accepted Answer

You can overflow hidden to your  content  Write like this     content       min-width 700px      margin-left 10px      overflow hidden      background-color AppWorkspace      Check this http   jsfiddle net Zvt2j 1

User · Answer

I have updated your jsfiddle and here is CSS changes you need to do    content       min-width 700px      margin-right  -210px      width 100       float left      background-color AppWorkspace

User · Answer

You could use css3 flexible box  it would go like this   First your wrapper is wrapping a lot of things so you need a wrapper just for the 2 horizontal floated boxes     lt div id  hor-box  gt        lt div id  left  gt          left        lt  div gt       lt div id  content  gt         content      lt  div gt   lt  div gt    And your css3 should be    hor-box       display  -webkit-box    display  -moz-box    display  box    -moz-box-orient  horizontal   box-orient  horizontal    -webkit-box-orient  horizontal        left           width 200px        background-color antiquewhite        margin-left 10px        -webkit-box-flex  0       -moz-box-flex  0       box-flex  0         content           min-width 700px        margin-left 10px        background-color AppWorkspace        -webkit-box-flex  1       -moz-box-flex  1        box-flex  1

User · Answer

CSS auto-fit container between float left  amp  float right divs solved my problem  thanks for your comments    left       width 200px      float left      background-color antiquewhite      margin-left 10px     content       overflow hidden      margin-left 10px      background-color AppWorkspace

User · Answer

wrapper       min-width 960px      margin-left auto      margin-right auto      position-relative     left       width 200px      position  absolute      background-color antiquewhite      margin-left 10px      z-index  2     content       padding-left 210px      width 100       background-color AppWorkspace      position  relative      z-index  1      If you need the whitespace on the right of  left  then add a border-right  10px solid  FFF  to  left and add 10px to the padding-left in  content

[css] CSS: Auto resize div to fit container width

Examples related to css