Cách bố trí 3 cột với trung tâm chất lỏng không có phao nổi

Question

Tôi đang cố gắng tạo bố cục ba cột, với các thanh ngang chiều rộng tĩnh và cột trung tâm chất lỏng. Tôi KHÔNG muốn các cột rơi xuống khi trang bị quá hẹp (cột giữa ở 250px), tôi muốn có toàn bộ điều chỉ đóng băng và sử dụng cuộn bên. Khá chắc chắn điều này không thể được thực hiện với phao nổi. Dưới đây là những gì tôi có cho đến nay:

http://jsfiddle.net/eNDPG/210/

HTML:

<div id="header"> 
    Header 
</div> 
<div id="container"> 
<span id="leftcol"> 
    Text1 
</span> 
<span id="rightcol"> 
    Text3 
</span> 
<div id="centercol"> 
    Text2 
</div> 
</div> 
<div id="footer"> 
    Footer 
</div> 

CSS:

#container { 
overflow:hidden; 
width: 100%; 
float: left; 
} 

#leftcol { 
border: 1px solid #0f0; 
display: inline-block; 
float: left; 
width: 200px; 
} 

#rightcol { 
border: 1px solid #0f0; 
display: inline-block; 
float: right; 
width: 250px; 
} 

#centercol { 
border: 1px solid #000; 
overflow: hidden; 
} 

#header { 
border: 1px solid pink; 
width: 100%; 
} 

#footer { 
border: 1px solid pink; 
width: 100%; 
} 

Answer 1

Không có gì sai với CSS float là. Bạn có thể sử dụng thuộc tính min-width trên trình bao bọc để đặt chiều rộng tối thiểu.

Dưới đây là một ví dụ:

HTML:

<div class="wrap"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <div class="center">Center</div> 
</div> 

CSS:

.wrap { 
    width: 100%; 
    min-width: 940px; 
} 

.left { 
    float: left; 
    width: 200px; 
} 

.center { margin: 0 205px; } 

.right { 
    float: right; 
    width: 200px; 
} 

JSBin Demo

Cập nhật: Và đây là edited Fiddle

Answer 2

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

display:table; 

example