css에서 고정폭+가변폭 div

예를들어 이런 구조다.

<div class="container">

<div class="left-child">

<div class="right-child">

</div>

이 상태에서, 

1) .container는 부모 요소에서 상속 받은 너비의 100%.

2) .left-child는 200px로 고정.

3) .right-child는 그 나머지.

구글링 해보면 display:inline-block;을 써라, 200px와 100%로 하고 margin-left:200px; 를 줘라 등등이 나온다.

해결되지 않았다.

그러던 중 발견한 stackoverflow의 한 포스팅..

CSS3에는 함수가 있었다!

calc() 함수를 이용하여 100%에서 200px를 빼주면 간단히 된다.

물론 sass나 less도 필요ㅇ벗다.

추가로 css3의 calc() 함수를 지원하는 브라우저는 아래 링크를 따라 가 보면 알 수 있다.

http://techbug.tistory.com/215

출처: http://stackoverflow.com/questions/16529291/div-to-take-up-entire-remaining-width?answertab=active#tab-top