自动扩展浮动Div的父级

时间:2011-12-30 16:23:28

标签: html cross-browser css-float compatibility

我正在处理的一个网站,包括三个主要部分,一个标题,容器和一个Foooter,所有这些都基于DIV。主页容器设置为右侧包含2个Boxes。我用浮动div制作了这些。如何让主容器自动调整大小?否则我的浮动div将只是覆盖页脚,这不是我想要的。 除了IE8之外,页面适用于我尝试过的所有浏览器......任何人都有任何想法如何解决这个问题?不幸的是,由于IE9只是Vista向上,因此在使用IE8的XP上仍会有很多用户。

我并不太担心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;
}

1 个答案:

答案 0 :(得分:0)