css fluid layout with fixed column

Question

fluid content-column과 fixed-width sidebar를 갖고 싶습니다. 브라우저의 크기가 조정되고 content-column이 작아지면 미디어 쿼리가 사이드 바를 콘텐츠 아래에 배치합니다.

section { 
    width: 100%; 
} 
#wrap { 
    margin: 0 auto; 
    max-width: 600px; 
    width: 100%; 
} 
#col1 { 
    float: left; 
    width: 200px; 
    height: 100px; 
    background: lightgreen; 
} 
#col2 { 
    width: 100%; 
    height: 100px; 
    background: lightblue; 
} 
@media only screen and (max-width: 400px) { 
    #col1 { 
     float: none; 
     width: 100%; 
    } 
} 

... HTML : :이 정확히 라운드 다른 방법이라는 것을 알고

<section> 
    <div id="wrap"> 
     <div id="col1"></div> 
     <div id="col2"></div> 
    </div> 
</section> 

여기

OK 내가 ... jsfiddle

@는 CSS를 것입니다. col2에 고정 너비가 있고 오른쪽에 있어야합니다. float 값을 "right"로 변경하면 col1이 오른쪽에 오게됩니다. 잘못된 것입니다. # col1과 # col2의 값을 모두 바꿔 넣으면 col2가 col1 아래에 표시됩니다. 이는 내 의도도 아닙니다. 제한된 브라우저 지원으로 인해 플렉스 상자를 사용할 수 없습니다.

어떻게 해결할 수 있습니까?

미리 Thx!

Answer 1

ok. 꽤 좋은 해결책을 찾았습니다 : http://jsfiddle.net/yyAFq/

테이블과 테이블 셀. 완벽한 브라우저 지원!

section { 
    width: 100%; 
} 
#wrap { 
    margin: 0 auto; 
    max-width: 600px; 
    width: 100%; 
    display: table; 
} 
#col1 { 
    width: 100%; 
    height: 100px; 
    background: lightblue; 
    display: table-cell; 
} 
#col2 { 
    width: 200px; 
    height: 100px; 
    background: lightgreen; 
} 
h1 { 
    height: 40px; 
    width: 50px; 
    background: red; 
} 
h1, p { 
    display: inline-block; 
    vertical-align: bottom; 
} 
p { 
    display: inline-table; 
    width: 100%; 
} 
@media only screen and (max-width: 400px) { 
    #col1 { 
     display: block; 
    } 
    #col2 { 
     width: 100%; 
    } 
} 

Answer 2

그럼이 내 솔루션입니다 ...

http://jsfiddle.net/x5fb4/2/

그것은 당신이 원하는 것을, 그러나 나는 "자바 스크립트 미디어 쿼리"사용 - 나는 자바 스크립트로 화면 크기를 확인하고 조정 말을하는 것입니다 그것으로.

#col1 { 
//width added at runtime by javascript (see jsfiddle) 
display:inline-block; 
height: 100px; 
background: lightblue; 
}