我需要你的帮助。我使用下面的设计，但要设置它，以便在一个设置的大小列将不再压缩收缩。我试过设置"最小宽度"，但不能让它工作。请帮助。
http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm提前感谢，
编辑:添加代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style media="screen" type="text/css">
/* <!-- */
body {
margin:0;
padding:0;
}
#header h1,
#header h2,
#header p {
margin-left:2%;
padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
font-weight:bold;
text-decoration:none;
color:#000;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
#container4 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#b2f0f9; /* column 4 background colour */
}
#container3 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#89ffa2; /* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:25%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:21%;
position:relative;
left:77%;
overflow:hidden;
}
#col2 {
float:left;
width:21%;
position:relative;
left:81%;
overflow:hidden;
}
#col3 {
float:left;
width:21%;
position:relative;
left:85%;
overflow:hidden;
}
#col4 {
float:left;
width:21%;
position:relative;
left:89%;
overflow:hidden;
}
/* --> */
</style>
</head>
<body id="active4">
<div id="header">
HEADER CONTENT
</div>
<div id="container4">
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h2>No Images</h2>
<p>This four column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
<!-- Column two end -->
</div>
<div id="col3">
<!-- Column three start -->
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column three end -->
</div>
<div id="col4">
<!-- Column four start -->
<h2>Cross-Browser Compatible</h2>
<p>This 4 column layout has been tested on the following browsers:</p>
<!-- Column four end -->
</div>
</div>
</div>
</div>
</div>
<div id="footer">
FOOTER CONTENT
</div>
</body>
将是有趣的，你试图看到你的错误在哪里。当我添加背景色和最小宽度col1，…
#col1 {
background: none repeat scroll 0 0 blue;
float: left;
left: 77%;
min-width: 200px;
overflow: hidden;
position: relative;
width: 21%;
}