3
我正在研究的一个网站，由三个主要部分组成，一个Header，Container和一个Foooter，全部基于DIV。主页容器设置为包含右侧的2个框。我使用浮动div制作了这些。我怎样才能让主容器自动调整大小？否则，我的浮动div只会放在页脚上，这不是我想要的。 页面在我试用过的所有浏览器中都能正常工作，除了IE8 ...任何人都有任何想法我可以解决这个问题吗？不幸的是，由于IE9仅仅是Vista的上升，IE8上仍然会有很多XP用户。自动扩展浮动Div的家长
虽然我不太在意CSS3的不兼容性。 :)
链接：http://www.clientone.wwdev.info
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="css/default.css" rel="stylesheet" type="text/css">
<meta name="robots" content="all">
<meta name="author" content="surrealholidays.com">
<meta name="robots" content="index,follow">
<link rel="shortcut icon" href="http://www.surrealholidays.com/images/logo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome to Surreal Holidays</title>
<style type="text/css">
img.c4 {border:0;width:88px;height:31px}
h2.c3 {text-align: center}
p.c2 {text-align: left}
div.c1 {text-align: left}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: underline;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
</style>
</head>
<body class="oneColFixCtr">
<div class="oneColFixCtr" id="page">
<div id="banner"><img src="images/logos/banner.png" width="1000" height="80" alt="Main Banner"></div>
<div id="links">
<div id="linkblock">
<p class="c1"><br>
<a href="/">Homepage</a> | Luxury Destinations | Private Tours | Terms & Conditions |Enquire | News | Contact Us</p>
</div>
</div>
<div id="navig">
<div class="c2 c1" id="navi_direc">Homepage ></div>
<div id="navi_newsl">Subscribe to see our latest offers: <label><input name="email" type="text" id="EmailAddress" value="Email Address" size="25"></label> <input type="submit" name="Submit" id="Submit" value="Go!"></div>
</div>
<div id="content"><img src="images/mainstory.jpg" width="1000" height="400" alt="Sample for Slideshow"><br>
<div id="hp_welcome">
<h2>Private Luxury Escorted Tours in Thailand - beyond your imagination</h2>
<p class="c2"><strong>At Surreal Holidays, you can really feel the passion for Thailand. From the first moment you contact our experienced team, you will be amazed by the in-depth local knowledge and deep love of the country and its people that you encounter. Not surprising! Some of us were born and raised in Thailand before moving to the UK. You will find we have a unique ability to understand how travellers from the UK can experience the best Thailand has to offer. No ordinary travel company, Surreal Holidays can tailor a holiday especially for you. Along the way, your experience will be enhanced by our high levels of customer service and thoughtful personal touches.</strong></p>
<p class="c2"> </p>
<h2 class="c3"><strong>Bespoke Holidays to Thailand</strong></h2>
<p class="c2"></p>
<p class="c2"><strong>Our founder's inspiration: "..like you, when I travel, I use all my senses to enhance the experience. This often leads to a "surreal" feeling, as though the holiday is a dream like state where the strange and bizarre juxtaposition with the calm and beautiful. Nowhere epitomises this more than Thailand, my homeland. Whether you are looking for an inspirational island hopping itinerary or romantic wedding and honeymoon locations, soft adventure activities or cultural experiences, you need look no further. Thailand offers much more than just a place to relax on a beach. You can discover unique flora and fauna, stunning marine parks, and breathtaking scenery at every turn. Indeed, there really is something for everyone in our Amazing Thailand."... Runci Weeden</strong></p>
<p class="c2"> </p>
<h2 class="c3"><strong>Unique Holidays to Thailand</strong></h2>
<p class="c2"></p>
<p class="c2"><strong>To find out more information on our Escorted Tour Holidays, including Nature Tours, Cultural Tours or Adventure Tours to Thailand, call 0845 003 5043 and speak to our friendly team.</strong></p>
<p class="c2"> </p>
</div>
<div id="col2">
<div id="hp_ftcol2off">
<h2>Our Latest Offers</h2>
<table width="380" border="0">
<tr>
<td width="255">
<p class="c2"><strong>Mai Samui<br>
8 Days 7 Nights - From £1876 </strong></p>
<p class="c2">Read more...</p></td>
<td width="125"><p><img src="images/MaiSamui/offers_hpthumb.jpg" width="125" height="81" alt="MaiSamui"></p></td>
</tr>
<tr>
<td>
<p class="c2"><strong>Offer Two</strong></p>
<p class="c2">Description</p>
<p class="c2">Click Here for More Info</p>
</td>
<td><p>Image</p></td>
</tr>
<tr>
<td>
<p class="c2"><strong>Offer Three</strong></p>
<p class="c2">Description</p>
<p class="c2">Click Here for More Info</p>
</td>
<td><p>Image</p></td>
</tr>
</table>
</div>
<div id="hp_ftcol2news">
<h2>Latest News</h2>
<p class="c2"><strong>Website Updates- 22 December 2011</strong></p>
<p class="c2">Following several major updates to our website, we would recommend that customers upgrade to Internet Explorer 9 or use an alternative browser such as Chrome or Safari to view this website properly.</p>
<p class="c2"> </p>
<p class="c2"> </p>
<p class="c2"><strong>Thailand Flooding Update - 29 November 2011</strong></p>
<p class="c2">Once again we would like to take this opportunity to advise you on the current conditions in sunny Bangkok and the surrounding areas...<br>
Read More...<br>
<br></p>
</div>
</div>
</div>
<div id="footer">
<div id="f_tr">
<br>
Tel: 0845 003 5043 (Local Rates from a BT Landline) , 01628 685 550 | Surreal Holidays Ltd, 31 Boyn Hill Road, Maidenhead, SL6 4HH<br>
<strong>© Surreal Holidays Ltd. 2009-2012 All Rights Reserved.</strong> Surreal Holidays is the Trading Name of Surreal Holidays Ltd. Company Number: 06690344<br>
<div id="f_php">
<div id="f_ph1"><img src="images/logos/logo-amazing.png" width="145" height="45" alt="Thailand"></div>
<div id="f_ph2">
<p>Registered Office: 145-157 St John Street, London EC1V 4PW<br>
Disclaimer | Privacy Policy | Copyright | Site Map</p>
</div>
<div id="f_ph3">
<img src="images/logos/logo-atol.png" width="45" height="45" alt="** PLEASE DESCRIBE THIS IMAGE **"><img src="images/logos/logo-atta.png" width="45" height="45" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</div>
</div>
</div> <!-- Closing Tags For #Footer -->
</div> <!-- Closing Tags For #Page -->
</body>
</html>
，这里是我的CSS：
@charset "utf-8";
/* CSS Document */
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #FFF4E1;
margin: 0;
padding: 10px;
text-align: center;
color: #333;
}
.oneColFixCtr#page {
width:1000px;
margin: 0 auto;
height:auto;
}
#banner {
width: 1000px;
height: 100px;
}
#links {
border-radius: 10px;
background-color: #856043;
color: #ffffff;
height: 60px;
width: 1000px;
vertical-align: middle;
}
#linkblock {
top: 115px;
height: 60px;
left: 11px;
}
#navig {
height: 30px;
width: 1000px;
}
#navi_direc{
float:left;
width: 548px;
font-size: 12px;
}
#navi_newsl{
float:left;
width: 449px;
font-size: 12px;
}
#content {
height: auto;
font-size: 12px;
overflow:hidden;
}
#content h2 {
font-size: 18px;
color: #8a5e3c;
font-weight: bold;
line-height: 22px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#content h3 {
font-size: 14px;
font-weight: normal;
color: #8A5D3C;
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#content h4 {
font-size: 13px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#content h5 {
margin: 0px;
font-size: 12px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
padding: 0px;
}
#content p {
line-height: normal;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
font-size: 12px;
}
#page #links #linkblock p {
font-size: 14px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#page #navig #navi_newsl div {
font-size: 12px;
}
#page #links #linkblock p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#footer {
background-color: #8A5D3C;
height: auto;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}#page #footer p {
color: #FFF;
}
#page #footer p {
font-size: 12px;
}
#hp_welcome{
width: 600px;
float:left;
margin-top: 0px;
}
#hp_ftcol2off {
width:380px;
float:right;
margin: 10px 0 0 10px;
background-color:#C1A790;
border-radius: 10px;
}
#hp_ftcol2news {
width:380px;
float:right;
margin: 10px 0 10px 10px;
background-color:#C1A790;
border-radius: 10px;
}
#page #content #hp_ftcol2off table tr td {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
#container_hp{
width: 1000px;
height: auto;
overflow:auto;
}
#f_tr{
height:auto;
}
#f_php{
width: 1000px;
height: 60px;
}
#f_ph1{
width:330px;
float:left;
}
#f_ph2{
width:340px;
float:left;
}
#f_ph3{
width:330px;
float:left;
}
.oneColFixCtr #page #footer #f_tr {
font-size: 12px;
}
.oneColFixCtr #page #footer #f_tr {
color: #FFF;
}
#col2 {
width:400px;
float: right;
border-bottom: 10px;
}
这将是有益的，如果只发布了相关的代码，或作简短的jsfiddle。 – 2011-12-30 17:03:02