dwa divy obok siebie, jedna 100% szerokość inne szerokość zależna od zawartości

Question

Chcę umieścić dwa znaczniki DIV obok siebie bez użycia stałej szerokości. Pierwszy element div rozwija się do zawartości, a drugi element div powinien wypełnić pozostałe miejsce. Również element div NIE może znajdować się na wierzchu drugiego elementu div, ponieważ ma przezroczysty obraz tła, więc jeśli przecinają się, jest zauważalny. Wypróbowałem wszystkie możliwości, które mogłem wymyślić, ale nie mogłem znaleźć rozwiązania za pomocą tagów DIV.

Mogę to zrobić za pomocą TABELI, ale czy można to zrobić za pomocą DIV? Czy jest to jeszcze jedna rzecz, której DIV nie może zrobić?

Oto kod:

  #right{ 
       background: green;  
       width: 100%; 
      } 
      #left { 
       margin-top: 5px; /* to test if they intersect*/ 
       background: red; 
      } 
      #container { 
       width: 800px; 
      } 
      <div id="container"> 
       <div id="left"> This div is as big as it's content</div> 
       <div id="right"> rest of space</div> 
      </div> 

Dzięki za odpowiedzi!

Answer 1

Patrz:http://jsfiddle.net/kGpdM/

#left { 
    background: #aaa; 
    float: left 
} 
#right { 
    background: cyan; 
    overflow: hidden 
} 

ta działa we wszystkich nowoczesnych przeglądarek i IE7 +.

Lewa kolumna będzie dokładnie taka sama, jak zawierająca ją zawartość. Prawa kolumna zajmie pozostałe miejsce.

"Sztuczka" za tą odpowiedzią to explained here.