浮动 Div 的自动扩展父级

发布于 2024-12-23 18:04:54 字数 10624 浏览 3 评论 0原文

我正在开发的一个网站由三个主要部分组成：页眉、容器和页脚，所有部分都基于 DIV。主页容器设置为在右侧包含 2 个框。我使用浮动 div 制作了这些。如何让主容器自动调整大小？否则我的浮动 div 只会覆盖在页脚上，而这不是我想要的。页面适用于我尝试过的所有浏览器，除了 IE8...有人知道如何解决这个问题吗？不幸的是，由于IE9只是Vista以上的版本，所以在XP上仍然有很多用户使用IE8。

不过我不太担心 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 &amp; Conditions |Enquire | News | Contact Us</p>
</div>
</div>
<div id="navig">
<div class="c2 c1" id="navi_direc">Homepage &gt;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</p>
<p class="c2">&nbsp;</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>&copy; 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;
}

原文

A website I am working on, consists of three main sections, a Header, Container and a Foooter, all based around DIVs. The homepage container is set to contain 2 Boxes on the right. I produced these using floating divs. How can I get the main container to resize automatically? Otherwise my floating divs will just lay over the footer, and that's not what I want.
Page works in all browsers I have tried out, apart from IE8... anyone got any ideas how I can fix this? Unfortunately since IE9 is only Vista upwards, there will be still a lot of users on XP with IE8.

I'm not too worried about the CSS3 incompatibility though. :)

Link: 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>

and here is my 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;
}

分享到QQ

分享到微博