CSS: Ridimensionamento automatico div per adattarsi alla larghezza del contenitore

Question

Ho due <div>: lasciato e contenuto. Questi due sono all'interno wrapper div che ha min-width:960px;. left ha larghezza fissa, ma voglio rendere flessibile il contenuto con larghezza minima di 700px e se lo schermo è più largo, incollarlo sul lato destro dello schermo.

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/

Answer 1

Puoi overflow:hidden al vostro #content. Scrivi come questo:

#content 
{ 
    min-width:700px; 
    margin-left:10px; 
    overflow:hidden; 
    background-color:AppWorkspace; 
} 

Scegli questa http://jsfiddle.net/Zvt2j/1/

Answer 2

CSS auto-fit container between float:left & float:right divs risolto il mio problema, grazie per i vostri commenti.

#left 
{ 
    width:200px; 
    float:left; 
    background-color:antiquewhite; 
    margin-left:10px; 
} 
#content 
{ 
    overflow:hidden; 
    margin-left:10px; 
    background-color:AppWorkspace; 
} 

Answer 3

Ho aggiornato la tua jsfiddle e qui è CSS cambia quello che devi fare:

#content 
{ 
    min-width:700px; 
    margin-right: -210px; 
    width:100%; 
    float:left; 
    background-color:AppWorkspace; 
} 

Answer 4

Si potrebbe utilizzare CSS3 box flessibile, che sarebbe andata In questo modo:

Prima il tuo wrapper avvolge un sacco di cose, quindi hai bisogno di un involucro solo per le 2 scatole orizzontali flottate:

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

E il tuo css3 dovrebbe essere:

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

Answer 5

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

Se avete bisogno di spazio bianco sul lato destro del #left, quindi aggiungere un border-right: 10px solid #FFF;-#left e aggiungere 10px alla padding-left in #content