Problem Clearing Floats in IE

**thenergle** · Feb 23, 2006, 10:17

I have looked through the FAQ's and have tried to emulate the clearer. It has been working fine in Firefox but alas, I can't figure out why it is not working in IE. I have used the same clearer class in two Web sites, and in both the clearer does not work in IE.

The page where the clearer is located is here at

http://nafsa.okstate.edu/scholarship.htm

here is my CSS code:

Code:

body {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	width: 800px;
	background-color: #FF6600;
}
#header {
	width: 800px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
#left {
	width: 130px;
	float: left;
	display: inline;
	padding: 10px;
	position: relative;
}
*html #left {width: 127px;}
#right {
	background-color: #FFFFFF;
	height: 100%;
	width: 626px;
	margin-left: 150px;
	margin-top: 0px;
	padding: 10px;
	border-right-width: 2px;
	border-left-width: 2px;
	border-right-style: double;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
}
*html #right{ width:623px;}

/* Fix IE. Hide from IE Mac \*/
*html #right { height: 1%; }
/* End */
#left ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000000;
	display: block;
	height: auto;
}
/* Fix IE. Hide from IE Mac \*/
*html #left ul li a{ height: 1%; }
/* End */

#left a {
	color: #000000;
	background-color: #FFFFFF;
	display: block;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #000000;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #000000;
	border-left-color: #000000;
	text-decoration: none;
	padding: 2px;
}
#left a:hover {
	color: #FFFFFF;
	background-color: #000000;
	display: block;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #000000;
	border-left-color: #FFFFFF;
}
.bottomlink {
	margin-top: 25px;
}
.clearer {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px; 
}
/* Hides from IE-mac \*/
* html .clearer {height: 1%;}
/* End hide from IE-mac */
#footer {
	clear: both;
	width: 800px;
	text-align: center;
	background-color: #000000;
	color: white;
}

Here is my HTML

Code:

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Native American Faculty and Staff Association</title>
<link href="css/nafsa.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header"><img src="images/banner.gif" alt="Native American Faculty and Staff Association" width="800" height="150" /></div>
<div id="left">
  <ul>
  	<li><a href="index.htm">Home</a></li>
    <li><a href="bylaws.htm">By Laws</a></li>
    <li><a href="contact.htm"> Contact Information</a></li>
    <li><a href="officers.htm"> Officers</a></li>
    <li><a href="membership.htm"> Membership Application</a></li>
    <li> <a href="meetings.htm">Meetings Dates and Times</a></li>
    <li><a href="scholarship.htm"> Scholarship Application</a></li>
	<li><a href="recipients.htm">Scholarship Recipients</a></li>
    <li> <a href="resources.htm">Resources </a></li>
  </ul>
 <div class="bottomlink">
  <ul>
  <li><a href="announcements.htm">Announcements</a></li>
  <li><a href="donate.htm">How to make a donation to NAFSA </a></li>
  </ul>
  </div>
</div>
<div id="right">  
  <p>The NAFSA Scholarship program began in 1995. &nbsp; Since then, NAFSA has awarded thousands of dollars in scholarships to deserving Native American students, both undergraduate and graduate.</p>
  <p><a href="documents/2006-2007%20NAFSA%20Scholarship%20Application.doc">2006-2007 Native American Faculty &amp; Staff Scholarship Application.doc</a></p>
  <p><a href="documents/2006-2007%20NAFSA%20Scholarship%20Application.pdf">2006-2007 Native American Faculty &amp; Staff Scholarship Application.pdf</a></p>

  <div class="clearer"></div>
  </div><div id="footer">&copy;Copyright 2006 NAFSA </div>
</div>
</body>
</html>

If anyone could tell me what it is I am doing wrong I would be very grateful.

Jordan

**Wullie** · Feb 23, 2006, 11:24

Try putting a comment in the clearer div tag

<div class="clearer"></div>

**thenergle** · Feb 23, 2006, 13:55

I put the comment in, but IE still is not forcing it down

**Paul O'B** · Feb 23, 2006, 19:02

Hi,

When the element has "layout" applied (see faq)t hen it only clears within its own stacking context in ie. You would need to remove the height and width for this to work in IE.

Code:

 #right {
 background-color: #FFFFFF;
 margin-left: 150px;
 margin-top: 0px;
 padding: 10px;
 border-right-width: 2px;
 border-left-width: 2px;
 border-right-style: double;
 border-left-style: solid;
 border-right-color: #000000;
 border-left-color: #000000;
}
/* Fix IE. Hide from IE Mac \*/
/* End */

Of course this leaves you open to layout bugs so you should probably nest an inner element now and give it a 100% width to try and regain layout.

**thenergle** · Feb 27, 2006, 12:12

Thanks Paul it looks like the float is clearing now. However, the clearer seems to be splitting the content so when there is no content the div element seems to be split.

**Paul O'B** · Feb 27, 2006, 12:41

Hi,

This will be the layout issue I talked about earlier. Try adding position:relative here:

Code:

#right {
background-color: #FFFFFF;
margin-left: 150px;
margin-top: 0px;
padding: 10px;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: double;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
position:relative;
}

If the object of the exercise is to get equal columns then you'd be better off just repeating a background image in the parent (or using the negative margin technique from the 3 cold demo sticky thread)

Or look at the method from PIE.

User Tag List

Thread: Problem Clearing Floats in IE

Thread Tools

Display

Problem Clearing Floats in IE

Bookmarks

Bookmarks

Posting Permissions