CSS: Auto resize div to fit container width

Question

I have two <div>: 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.
screenshot

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/

duplication of http://stackoverflow.com/questions/7051768/justify-divs-with-css-to-fill-width-of-parent-container — primetwig, Jan 14 '13 at 13:16
Try: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs — ATOzTOA, Jan 14 '13 at 13:22
Take a look at this [link](http://blog.html.it/layoutgala/LayoutGala32.html) — Morpheus, Jan 14 '13 at 13:31

score 10 · Accepted Answer · answered Jan 14 '13 at 13:34

10

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/

answered Jan 14 '13 at 13:34

sandeep

91,313
23
137
155

score 5 · Answer 2 · answered Jan 14 '13 at 13:38

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:

 <div id="hor-box"> 
    <div id="left">
        left
      </div>
    <div id="content">
       content
    </div>
</div>

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

It's great for CSS3 supported browsers. – Maysam Jan 14 '13 at 13:42 — Maysam, Jan 14 '13 at 13:42

Serj Sagan · Answer 3 · 2014-06-03T01:02:49.973

#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

score 1 · Answer 4 · edited May 23 '17 at 11:55

1

CSS auto-fit container between float:left & 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;
}

edited May 23 '17 at 11:55

Community

1
1

answered Jan 14 '13 at 13:34

Maysam

7,246
13
68
106

score 1 · Answer 5 · answered Jan 14 '13 at 13:36

1

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

answered Jan 14 '13 at 13:36

Morpheus

8,829
13
51
77

CSS: Auto resize div to fit container width

5 Answers5

Linked