我有一个网站，我的工作，我应该已经完善了FIRST布局。但是我现在面临着不是一路走到底的问题。我已阅读如何让CSS 3栏布局教程http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks 但 我所需要的东西，将是我现有的网站一个简单的办法....我有大约10页已经创建和我在想回到一个表格布局（然后改造整个事情就像我在这里所做的 - >http://www.centuryautosd.com/new.asp 除非 有人做的更简单，更好的方法CSS - 需要柱一路流到底部的3列布局
这里是现有的网站，因为它现在站立与CSS和问题的列 - > http://www.centuryautosd.com/
我可以肯定地使用一些帮助！
我很确定这个策略会适合你：http://www.ejeliot.com/blog/61
编辑：好的，我们走吧。在HTML sidebar1和sidebar2之间
1>移动搜索Maincontent：
寻找过去的Dreamweaver模板和分裂内联CSS，我已经如下做出了调整。
2>更改sidebar1的CSS来：
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #CCCCCC;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
背景已改为突出页面上的效果。
3>更改sidebar2的CSS来：
.thrColFixHdr #sidebar2 {
float: left;
width: 160px;
background: #EEEEEE;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
4>更改搜索Maincontent的CSS来：
.thrColFixHdr #mainContent {
float: left;
width: 390px;
background: #DDDDDD;
padding: 0 10px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
5>添加定义为contentContainer：
.thrColFixHdr #contentContainer {
overflow: hidden;
}
6>更改.footer to #footer并将margin-top：8px更改为padding-top：8px并添加文本对齐：center并打开页脚文本。通过记事本+ + HTML整洁这里
整个代码运行（一些选项卡格式化投入堆栈溢出时略输）：
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.thrColFixHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.thrColFixHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
.thrColFixHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.thrColFixHdr #contentContainer {
overflow: hidden;
}
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #CCCCCC;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #sidebar2 {
float: left;
width: 160px;
background: #EEEEEE;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #mainContent {
float: left;
background: #DDDDDD;
width: 390px;
padding: 0 10px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #footer {
padding: 0 10px 0 20px;
background:#BBBBBB;
}
.thrColFixHdr #footer p {
margin: 0;
padding: 10px 0;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*]]>*/
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
.side a {
color: #FFF;
text-decoration: none;
}
a.side:link {color:#FF3;
text-decoration: none;
} /* unvisited link */
a.side:visited {color:#FFF
text-decoration: none;
} /* visited link */
a.side:hover {color:#C00}
a.side:active {color:#C00}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#footer {
font: 12px Arial, Helvetica, sans-serif;
color: #FF3;
text-decoration: none;
padding-top: 8px;
text-align: center;
}
a.footer:link {color:#FF3}
a.footer:visited {color:#FFF}
a.footer:hover {color:#C00}
a.footer:active {color:#C00}
/*]]>*/
</style>
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1><!-- end #header -->
</div>
<div id="contentContainer">
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the
length of the content. If you'd like a dividing line
instead, place a border on the left side of the #mainContent
div if it will always contain more content.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien.</p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing.
Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio. Donec et ipsum et sapien vehicula
nonummy. Suspendisse potenti.</p>
<h2>H2 level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing.
Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio.</p><!-- end #mainContent -->
</div>
<div id="sidebar2">
<!-- #BeginLibraryItem "/Library/sidebar2.lbi" -->
<div align="center" class="side">
<img src="images/seHable.jpg" width="162" height="48" alt=
"Se Habla Espanol" border="0" /><br />
<br />
<a href="https://secure.carfax.com/creditCard.cfx" target=
"_blank"><img src="images/carfax.jpg" width="145" height="35"
alt="CARFAX" border="0" /></a><br />
<a href="https://secure.carfax.com/creditCard.cfx" target=
"_blank">FREE CAR FAX</a><br />
<br />
<a href=
"http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
target="_blank"><img src="images/caGOV.jpg" width="109"
height="78" alt="CA.gov" longdesc=
"http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
border="0" /><br />
Verify a Smog Check</a><br />
<br />
<a href="http://www.iihs.org/ratings/default.aspx" target=
"_blank"><img src="images/topSafetyPick.jpg" width="111"
height="131" alt="Top Safety Picks" longdesc=
"http://www.iihs.org/ratings/default.aspx" border=
"0" /><br />
Top Safety Picks</a><br />
<br />
<a href="http://www.kbb.com/" target="_blank"><img src=
"images/kbb.jpg" width="155" height="56" alt=
"Kelly Blue Book" longdesc="http://www.kbb.com/" border=
"0" /><br />
Kelly Blue Book</a>
</div><!-- #EndLibraryItem -->
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the
length of the content. If you'd like a dividing line
instead, place a border on the right side of the #mainContent
div if it will always contain more content.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien.</p>
<!-- end #sidebar2 -->
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
</div>
<div id="footer">
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
<span class="footer">CENTURY AUTO GROUP, INC. |
619.281.2300<br />
COPYRIGHT 2009-2011 ALL RIGHTS RESERVED | EMAIL: <a href=
"mailto:[email protected]" class=
"footer">[email protected]</a></span>
<!-- #EndLibraryItem --><!-- end #footer -->
</div><!-- end #container -->
</div>
</body>
</html>
我一定会感谢你的答案，我读通，并尝试了一些的例子，而不成功。看起来容器的容器高度不如容器。 有没有可能去这个网站，然后告诉我如何改变CSS？ http://www.centuryautosd.com/help.asp 如果你能告诉我如何改变这个CSS我可以用它来改变我的所有页面，因为这是我一开始模板with..thank你这么多 – Drea 2009-12-17 16:35:55
而另一个问题是，各页生成一个不同的组的汽车（有时仅1汽车，因此具有“短页”等倍20辆汽车引起的页面要长），所以总是列具有适合的大小它动态展开的页面。 – Drea 2009-12-17 16:42:25
如果我今晚有机会，我会尽力为你寻找。 ::做笔记:: – Aaron 2009-12-17 17:09:30