DIV 레이아웃에서 메뉴너비는 고정이고 본문너비는 가변일때 처리방법은?

div 로 레이아웃을 구성할때 왼쪽에 메뉴를 넣고 오른쪽에 본문을 넣는 경우가 많다.

그런데 만약 오른쪽에 표시되는 본문 div 의크기를 가변적으로 하고싶다면 어떻게 해야할까?

이것을 해결하기위해 여러가지 테스트를 해 보았다.

 

먼저 기본적으로 본문의 너비를 400px 로 한 레이아웃은 아래와 같다.

 

가장 먼저 생각한것은 main 의 너비를 100% 로 하는것인데 이렇게 하면 아래와같이 된다.

이건 아니다.

 

다음으로는 left 의 position 을 absolute 로 설정하고 main 의 margin-left 를 left 의 크기만큼 주는것이다.

이것역시 위처럼 left 의 크기만큼 오른쪽으로 삐져나가는 현상이 발생했다.

 

결국 아직 답을찾지 못했다.

어떤 방법이 있을까?