Trái div chiều rộng 200px, nội dung div phần còn lại?

Question

body { 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 13px; 
      } 

      #wrapper { 
       padding: 1px; 
       margin: 0 auto; 
      } 

      #left { 
       width: 200px; 
       float: left; 
       background: orange; 
       position: fixed; 
       text-align: center; 
       padding: 2px; 
      } 

      #content { 
       float: right; 
       text-align: left; 
       padding: 2px; 
       width: ???; 
       background: #F0F0F0; 
      } 

Xin chào một lần nữa stackoverflow! Tôi muốn tạo bố cục đơn giản, với chiều rộng trình đơn là 200px và div nội dung chiếm phần còn lại của chiều rộng ... Nhưng làm cách nào tôi có thể làm điều đó?

Tôi đã tìm kiếm trên google và về các chủ đề stackoverflow khác, nhưng tôi không thể tìm thấy bất cứ điều gì ...

Greetings

Edit: Tôi đã cố gắng tìm kiếm trên goolge một lần nữa và tôi tìm thấy một ví dụ của nó như thế nào nên trông giống như: http://www.thesitewizard.com

Nhưng vì ông có một số tên div kinda lạ tôi không biết những gì mã ông sử dụng cho những gì div ...

Answer 1

Bạn có thể làm việc với phao kết hợp với biên độ để đạt được kết quả mong muốn của bạn. Để có được những gì bạn muốn HTML-cấu trúc của bạn sẽ trông giống như thế này:

<div id="wrapper"> 
    <div id="menu">place your content here</div> 
    <div id="main">place your content here</div> 
</div> 

Các yêu cầu tối thiểu CSS sẽ trông như thế này:

#menu { float: left; width: 200px; } 
#main { margin-left: 200px; } 

Tôi đã thêm một demo on jsfiddle để hiển thị các kết quả với sự giúp đỡ của một số màu nền.

Answer 2

bạn có thể sử dụng

width:100%; 
padding-left:200px; 
float:right; 

cho # content và

width:200px; 
float:left; 
padding-left:-200px; 

cho #left

Answer 3

Điều gì về cách sử dụng display:table, display:table-row, display:table-cell yếu tố?

jsFiddle đây: jsFiddle

display: table hiện đang được hỗ trợ trong tất cả các trình duyệt, vì vậy năm 2013 tôi sẽ sử dụng này

Answer 4

Tôi ngạc nhiên không ai đã đáp lại bằng CSS: flex vào thời điểm này

display:flex; 

Để biết hướng dẫn về tất cả các cách bạn có thể sử dụng thuộc tính này, hãy thử flexbox froggy