CSS clear: both; ISSUE

#1 (**permalink**) 07-23-2008, 09:10 PM

New to CSS, obviously: I have a left floated div of 200px wide that stretches
lengthwise as the content fills it. At the bottom there is a footer with the
clear:both; applied to it. As I fill the float with content it is still
stretching behind the footer instead of pushing it down. Now on the right side
there is a right floated div, and as the content fills that portion up it IS
able to push the footer down. Any ideas to why it isn't working on the left
side? I'll attach the code. Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="The Colony Beach and Tennis Resort" content="Tennis, Dining,
Resort, Shopping, Tropical" />
<meta name="Longboat Key" content="Longboat Key, Florida, Gulf Coast" />

<meta name="Megan McFadden" content="The Colony Beach and Tennis Resort" />

<style type="text/css" media="all">@import "css/master.css";</style>
</head>

<body>
<div id="page-container">

<div id="top-nav">
<div id="altnav">
<a href="#">Contact Us</a> |
<a href="#">Sign Up for Email Specials</a> |
<a href="#">Value Packages</a> |
<a href="#">Hot Specials!</a> </div>
</div>

<div id="spacer"></div>

<div id="main-nav-top"></div>

<div id="page-container2">

<div id="main-nav">
<div id="logo">
<img src="images/general/Logo.gif" /></div>
<dl>
<dt id="about"><a href="#">About</a></dt>
<dt id="accommodations"><a href="#">Accommodations</a></dt>
<dt id="activities"><a href="#">Resort Activities</a></dt>
<dt id="dining"><a href="#">Dining</a></dt>
<dt id="shopping"><a href="#">Shopping</a></dt>
<dt id="spa"><a href="#">Spa</a></dt>
<dt id="events"><a href="#">Special Events</a></dt>
<dt id="groups"><a href="#">Group Gatherings</a></dt>
</dl>
<div id="ads">
<img src="images/ads/staycation.jpg"><br/>
<img src="images/ads/girls_getaway.jpg"><br/>
<img src="images/ads/stonecrab.jpg"><br/></div>

</div>

<div id="reservations">
<div id="booking"><form
action="https://reservations.ihotelier.com/istay.cfm" method="get">
<input type="hidden" name="HotelID" value="2200" />
<input type="hidden" name="LanguageID" value="1" />
<input type="hidden" name="Rooms" value="1" />
<font color="#FFFFFF" size="2" face="Palatino
Linotype">Check-In Date:</font>
<input name="DateIn" type="text" size="8" />
<font color="#FFFFFF" size="2" face="Palatino
Linotype">Nights:</font>
<select name="Length">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<font color="#FFFFFF" size="2" face="Palatino
Linotype">Adults:</font>
<select name="Adults">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<font color="#FFFFFF" size="2" face="Palatino Linotype">
Children:</font>
<select name="Children">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input name="submit" type="submit" class="formcolor"
value="Check Availability">
</form>
<script type="text/javascript" language="javascript">
function getDateStr() {
var today = new Date();
var todayStr = (today.getMonth()+1) + "/" + today.getDate() + "/" +
today.getFullYear();;
document.resform.DateIn.value = todayStr;
}
getDateStr();
</script>
</div></div>

<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=6,0,29,0" width="600" height="320">
<param name="movie" value="images/flash/Index_Banner_NEW.swf" />
<param name="quality" value="high" />
<param name="WMODE" value="transparent">
<embed src="images/flash/Index_Banner_NEW.swf" width="600"
height="320" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" wmode="transparent"></embed></object>
</div>

<div id="sub-nav"></div>

<div id="header"><img src="images/headers/GENERIC.gif" /></div>

<div id="content">
<div id="content-text">
<p>Content</p>

</div>
</div>

</div>

<div id="bodyfooter"></div>

<div id="spacer2"></div>

<div id="footer">
<div id="footnav">
<a href="#">Home</a> |
<a href="#">Contact Us</a> |
<a href="#">Employment</a> |
<a href="#">Location</a> |
<a href="#">Sign Up for Email Offers</a><br/>
<a href="#">Gift Certificates</a> |
<a href="#">Gulf Coast Connoisseur Club</a> |
<a href="#">Owner Site Log In</a> |
<a href="#">Reservations</a> |
<a href="#">Privacy Policy</a><br/>
1620 Gulf of Mexico Dr.| Longboat Key, FL 34228 | (941) 383.6464 |
800.4.COLONY | <a href="#"></a>info@colonyfl.com</a>
</div>
</div>
</div>
</body>
</html>

/* HERE IS THE LINKED STYLE SHEET; */

/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
#page-container {
width: 800px;
margin: auto;
}
#page-container2 {
width: 800px;
background: url(../images/general/faux_column.png);
}
#top-nav {
background: url(../images/general/header.png);
height: 50px;
font-family: "Palatino Linotype";
font-size: 14px;
color: #FFFFFF;
}
#top-nav a {
color: #FFFFFF;
text-decoration: none;
}
#top-nav a:hover {
color: #99CCFF;
}
#top-nav #altnav {
width: 800px;
text-align: center;
margin-top: 6px;
}
#spacer {
background: url(../images/general/spacer.gif);
height: 30px;
}
#main-nav-top {
background: url(../images/general/top_rounded.png);
height: 25px;
}
#main-nav {
float: left;
width: 200px;
height: 35px;
}
#main-nav dl {
padding: 0;
margin: 25px;
}
#main-nav dt a {
display: block;
height: 0px !important;
height /**/:35px; /* IE 5/Win hack */
padding: 35px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}
#main-nav dt a:hover {
background-position: 0 -35px;
}
#main-nav dt#about,
#main-nav dt#about a { width: 160px; background-image:
url(../images/buttons/about_btn.gif); }

#main-nav dt#accommodations,
#main-nav dt#accommodations a { width: 160px; background-image:
url(../images/buttons/accommodations_btn.gif); }

#main-nav dt#activities,
#main-nav dt#activities a { width: 160px; background-image:
url(../images/buttons/activities_btn.gif); }

#main-nav dt#dining,
#main-nav dt#dining a { width: 160px; background-image:
url(../images/buttons/dining_btn.gif); }

#main-nav dt#shopping,
#main-nav dt#shopping a { width: 160px; background-image:
url(../images/buttons/shopping_btn.gif); }

#main-nav dt#spa,
#main-nav dt#spa a { width: 160px; background-image:
url(../images/buttons/spa_btn.gif); }

#main-nav dt#events,
#main-nav dt#events a { width: 160px; background-image:
url(../images/buttons/events_btn.gif); }

#main-nav dt#groups,
#main-nav dt#groups a { width: 160px; background-image:
url(../images/buttons/groups_btn.gif); }

#main-nav #logo {
width: 200px;
margin-left: 25px;
}
#ads {
width: 200px;
margin-left: 25px;
}
#reservations {
float:right;
width: 600px;
height: 40px;
background-image: url(../images/general/sub_navigation_background.gif);
}
#reservations #booking {
width:600px;
margin-top: 7px;
margin-left: 5px;
text-align: left;
}
.formcolor {
background-color: #006699;
font-family: "Palatino Linotype";
color: #FFFFFF;
font-size: 12px;
border: thin solid #FFFFFF;
height: 22px;
width: 110px;
text-align: center;
}
#flash {
float: right;
width: 600px; /* was 600px; */
height: 320px;
}
#sub-nav {
float: right;
background: url(../images/general/sub_navigation_background.gif);
width: 600px;
height: 40px;
}
#header {
float: right;
width: 600px;
height: 75px;
}
#content {
float: right;
width: 600px;
}
#content-text {
width:600px;
}
#bodyfooter {
clear: both;
background: url(../images/general/body_footer.png);
height: 40px;
}
#spacer2 {
clear: both;
background: url(../images/general/spacer.gif);
height: 30px;
}
#footer {
clear: both;
background: url(../images/general/footer.png);
height:100px ;
font-family: "Palatino Linotype";
font-size: 14px;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
text-decoration: none;
}
#footer a:hover {
color: #99CCFF;
}
#footer #footnav {
width: 800px;
text-align: center;
margin-top: 20px;
}

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode