너비가 100 % 인 중첩 테이블과 동적 너비가있는 두 div 정렬

Question

너비가 100 % 인 상위 내에서 두 div (동적 너비와 함께)를 나란히 정렬하려고합니다. div 중 하나의 내부에 중첩 테이블 (100 % 포함)이있는 것을 보았을 때까지 어렵지 않았습니다.

내가 원하는 것은 :
#parent 폭 100 %

#left 내 컨텐츠에 의한 #right 자동 폭 # "의"#right "
table 100 % 폭에서 남은 빈 공간의 공허함을 채우기 왼쪽 "

이

문제 :
아래의 예에서 볼 수 있듯이, 내가 사업부를 얻을 수는 B의 e side-by-side, 그러나 나는 "#left"의 100 %가되는 테이블을 얻을 수 없다. 대신 "#parent"아래로 이동합니다.

예 :
http://jsfiddle.net/MHWQT/

번호 :

HTML

<div id="parent"> 

    <div id="right">RIGHT!</div> 

    <div id="left"> 
     <table> 
      <tr> 
       <th>Header</th> 
       <th>Also Header</th> 
      </tr> 
     </table> 
    </div> 

</div> 

CSS

내가 #parent 내부의 모든 변경 @media 속성을 사용하게 될거야 언급하는 것을 잊었다 대답
에

#parent { 
    width: 100%; 
    height: 300px; 
} 

#right { 
    float: right; 
    width: auto; 
    height: 100%; 
} 

#left { 
    width: 100%; 
    height: 100%; 
} 

table { 
    width: 100%; 
} 

편집
재생시 특정 폭 아래의 화면. 그래서 현재의 html 구조를 유지하고 싶습니다.

Answer 1

저는 CSS로 작업하는 동안 오래되었습니다. 그러나 먼저 right 코드 블록 위에 left div가 있어야합니다. HTML과 CSS가 순차적으로 진행됩니다 (내가 아는 한도 내에서)

왼쪽 블록에 대해 달성하려는 것은 JavaScript가 작동해야합니다. 먼저 테이블의 내용을 가져와로드 할 때 내용의 크기에 따라 left 블록의 크기를 조정해야합니다.

페이지로드의 수명주기를 살펴보고 적절하게 크기를 조정할 수 있는지를 기반으로 가장 먼저 렌더링되는 부분을 확인하는 것이 좋습니다.

WORKING 편집 됨 :

난 당신의 코드를 연주하고이 코드 블록은 "수축에 맞는"기능을 제공 할 것입니다 생각.

HTML :

<div id="parent"> 
    <div id="right">sdfdsfdsfdsfsdf</div> 
    <div id="left"> 
     <table> 
      <tr> 
       <th>Header</th> 
       <th>Also Header</th> 
      </tr> 
     </table> 
    </div> 
</div> 

CSS :

#parent { 
    width: 100%; 
    height: 300px; 
    background: rgba(255, 0, 0, 0.1); 
} 

#right { 
    float:right; 
    width:auto; 
    height: 100%; 
    background: rgba(0, 0, 255, 0.1); 
    display:inline-block; 
    text-align:center; 
} 

#left { 
    height: 100%; 
    background: rgba(0, 255, 0, 0.1); 
    width:100%; 
} 

table { 
    width:300px; 
    background: rgba(255, 255, 0, 0.1); 
} 

Answer 2

<table id="parent"> 
    <tr> 
    <td id="left"> 
     <table id="table"> 
      <tr> 
      <th>Header</th> 
      <th>Also Header</th> 
      </tr> 
     </table> 
     </td> 
    <td id="right">RIGHT!</td> 
    </tr> 
</table> 

그리고 당신의 테이블 CSS를 변경 :

#table { 
    width: 100%; 
    background: rgba(255, 255, 0, 0.1); 
} 

Answer 3

, CSS의 테이블 폭을 제거 jQuery를 포함 다음이 포함

$(document).ready(function(){ 
    var new_width = $("#parent").width() - $("#right").width(); 

    $("table").first().css("width", new_width); 

});​ 

Answer 4

The OP write in an edit :

내가 질문을 게시 심지어를 해결하기 위해 노력의 시간 후, 조금 후에 그것을 해결하기 싫어 질문을 게시하기 전에 문제가 이지만, 나는 그다지 덜 해결하지 못했습니다. 나는

CSS

#parent { 
    width: 100%; 
    height: 300px; 
    background: rgba(255, 0, 0, 0.1); 
} 

#right { 
    float: right; 
    width: auto; 
    height: 100%; 
    background: rgba(0, 0, 255, 0.1); 
} 

#left { 
    position: relative; 
    overflow: hidden; 
    /*width: 100%;*/ 
    height: 100%; 
    background: rgba(0, 255, 0, 0.1); 
} 

table { 
    width: 100%; 
    background: rgba(255, 255, 0, 0.5); 
}