Zrób lewą div zajmuj pozostałą szerokość bez zamiany elementów

Question

Mam 2 elementy div obok siebie. Prawy div ma stałą szerokość. Lewy element div powinien wypełnić pozostałą przestrzeń nawet podczas zmiany rozmiaru okna. Przykład:

+---------------------------------+ +---------------+ 
|         | |    | 
|    divLeft    | | divRight | 
|  <- dynamic width ->  | |  120px  | 
|         | |    | 
+---------------------------------+ +---------------+ 

<div> 
    <div id="divLeft">...</div> 
    <div id="divRight">...</div> 
<div> 

Jest a solution that uses float:right on the right element ale wymaga zmiany kolejności elementów tak:

<div> 
    <div id="divRight" style="float: right; width: 120px;">...</div> 
    <div id="divLeft">...</div> 
<div> 

Czy istnieje rozwiązanie, które nie wymaga zmiany kolejności elementów? Jestem w sytuacji, gdy ich zmiana spowoduje inne problemy. Wolę rozwiązanie CSS/HTML od tego, ale jestem otwarty na używanie Javascript/JQuery.

Oto niepracująca JSFiddle z mojej próby rozwiązania. Próbuję ustawić niebieski div na prawo od zielonego diva.

Answer 1

Chociaż nie działa z < = IE7, display:table-cell wydaje rade:

#divLeft { 
    background-color: lightgreen; 
    vertical-align: top; 
    display:table-cell; 
} 
#divRight { 
    display:table-cell; 
    width: 120px; 
    background-color: lightblue; 
    vertical-align: top; 
} 

jsFiddle example

Answer 2

Używając display:table i table-cell dobrze sobie z tym radzić. I nie trzeba dodawać zawijania .container div, ale tu jest rozwiązanie:

http://jsfiddle.net/NmrbP/2/

.container { 
    display:table; 
} 
#divLeft { 
    overflow: hidden; 

    background-color: lightgreen; 
    vertical-align: top; 
    display:table-cell; 
} 

#divRight { 
    width: 120px; 

    background-color: lightblue; 
    vertical-align: top; 
    display:table-cell; 
} 

Answer 3

Czy to takie rzeczy? http://jsfiddle.net/KMchF/5/

#divLeft { 
    float: left; 
    overflow: hidden;  
    background-color: lightgreen; 
    vertical-align: top; 
    position: absolute; 
    right: 120px; 
} 

#divRight { 
    float: right; 
    width: 120px;  
    background-color: lightblue; 
    vertical-align: top; 
} 

Dodałem polanie div po tak można kontynuować z resztą strony jak inaczej elementy byłyby pod div { position: absolute; }

Answer 4

można rozwiązać przy użyciu pozycjonowanie

#divLeft { 
    background-color: lightgreen; 
    width: 100px; 
} 
#divRight { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    right: 0; 
    background-color: lightblue; 
} 
body { /* or parent element */ 
    position: relative;   
} 

Working fiddle

Answer 5

Mam to działa tak: HTML:

<div id="divLeft"> 
    [divLeft] 
    Lorem ipsum dolor sit amet, omnes molestie repudiandae eos cu, doming dolorum nonumes has ad. Magna ridens et his, eripuit salutatus sententiae te ius. Ludus accumsan ea usu, ea sed meliore maiorum molestiae, has facer dolore ornatus ut. Eam adhuc platonem mnesarchum ad, mei autem fuisset electram ei. Hinc omnesque eu mei. Ut sit odio melius aperiri, ei mei legere eruditi.<br/> 

    Mel te sale vitae putant, diceret nusquam est an. Ad melius legimus vel. Eum dicam primis persecuti ea, ne alia unum partiendo nec. Ferri tollit docendi et pro, usu vide putant eirmod et. Qui an nostrud dolorum. Sea modo case fugit ea, mea te autem doming dolorum. 
</div> 

<div id="divRight"> 
    [divRight] 
    Sit no doctus invenire. Sint consequuntur mei ne, an mea perpetua omittantur conclusionemque. Quaestio platonem no pro. Mei choro oblique mandamus ea, dicat vivendo eloquentiam in eam. Ne pro velit ceteros.<br/> 

Quem consulatu te pro, albucius menandri et sit. Ne vis nibh nominavi atomorum. Eu pri enim omnes. Iisque vidisse cotidieque ius eu, in fierent dissentiet sed, cu eam sensibus honestatis. 
</div> 

CSS:

#divLeft { 
float: left; 
overflow: hidden; 
width: 80%; 
background-color: lightgreen; 
vertical-align: top; 
} 
#divRight { 
    float: right; 
    width: 15%; 

    background-color: lightblue; 
    vertical-align: top; 
} 

Praca JSFiddle.

Answer 6

Spróbuj tego:

.div_left{ 
    width:100%; 
    height:100px; 
    position:absolute; 
    top:0px; 
    right:200px; 
} 
.div_right{ 
    width:200px; 
    height:100px; 
    float:right; 
    background-color:red; 
} 

Prawo atrybutem lewy div musi być szerokością prawego diva i jeśli te divy są wewnątrz innego div, to trzeba s do przepełnienia: ukryte. W takim przypadku prawy div będzie unosić się na prawo i będzie miał szerokość 200 pikseli, a lewy div zostanie umieszczony na 200px od prawej krawędzi, a mimo to będzie miał 100% szerokości, jeśli przekroczy szerokość div pojemnika, przypisane przepełnienie rozwiąże ten problem.