Resolved CSS Float hiding behind background of relatively positioned container element in IE6

elleg · 05-06-2009, 09:32 PM

I've googled, I've searched forums, and I've yet to find a solution for my problem. I have a floated element inside of a relatively positioned element. My container element (the relatively positioned one) has a background color. I need to set the overflow to hidden, so that my floated sidebar does not appear to overlap the non-floated elements. In order for overflow: hidden to work in IE6, I had to make my container elements explicitly relatively positioned. This is fine for all of my block elements which do not contain floated elements; everything works beautifully in those cases. However, as soon as my container holds a floated element, the floated element is rendered underneath the background of the container. Right now, the only option I'm seeing is to get rid of the background of my container div. I don't like that idea. Does anyone know of a workaround for this? This is for an internal website (on my company's intranet), and most people here are using IE6. I'd also prefer a workaround that is purely CSS; not everyone at my company is allowed to have Javascript enabled.

Oh, and I have tried adding z-index properties to the container and float, but that didn't fix it.

Here's some sample code for my problem:
(please note, the clear.css file that is linked is very similar to the one presented at: http://meyerweb.com/eric/tools/css/reset/index.html)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../clear.css" />
<style type="text/css">


/* Formatting for content */
.content{
	background-color: #FFFFEE;
	width: 90%;
	margin: 5px auto 10px auto;
	padding: 10px 20px 10px 20px;
	position: relative;
	}

/* Rule for class to clear floats, etc. */
.clear {
	clear: both;
	}

/* Formatting for sidebar */
.sidebar {
	margin: 0 0 0 25px;
	float: right;
	width: 175px;
	}

.sidebar div{
	border-top: 1px dashed #993333;
	border-bottom: 1px dashed #993333;
	margin: 10px 0 10px 10px;
	padding: 0;
	background-color: #EEEEE0;
	}

.sidebar h3{
	margin: 0;
	padding: 0.5em 10px 0 10px;
	border-top: 5px solid #ffffee;
	}

.sidebar p{
	margin: 0;
	padding: 0 10px 0.75em 10px;
	border-bottom: 5px solid #ffffee;
	}


/* Formatting for definition lists */
dl {
	border-bottom: 1px dashed #993333;
	border-top: 1px dashed #993333;
	background-color: #EEEEE0;
	padding: 0.5em; 
	margin: 15px 0 15px 0;
	line-height: 1.5em;
	overflow: hidden;
	position: relative;
	}

dt {
	margin: 0 0 0 0;
	font-weight: bold;
	width: 200px;
	float: left;
	clear: left;
	text-align: right;
	color: #993333;
	}

dd {
	margin: 0 0 0 210px;
	padding: 0 0 0 0.5em;
	font-style: italic;
	}


</style>
</head>
<body>
<div class="content">
	<h2>This is a header 2</h2>

	<p> 
		content content content content content content content content content 
		content content content content content content content content content 
	</p>
	<div class="sidebar">
		<div>
			<h3>This is header 3</h3>
			<p>content content content content content content content content</p>
		</div>
		<div>
			<h3>This is header 3</h3>
			<p>content content content content content content content content</p>
		</div>
		<div>
			<h3>This is header 3</h3>
			<p>content content content content content content content content</p>
		</div>
	</div>
	<h3> This is a header 3</h3>
	<p> 
		content content content content content content content content content 
		content content content content content content content content content 
		content content content content content content content content content 
		content content content content content content content content content 
		content content content content content content content content content
	</p>
	<span class="def-cap">Definitions:</span>
	<dl class="withcap">
		<dt>This is a definition term</dt>
			<dd>This is a definition.</dd>
		<dt>This is a definition term</dt>
			<dd>This is a definition.</dd>
			<dd>This is a definition.</dd>
		<dt>This is a definition term</dt>
			<dd>This is a definition.</dd>
	</dl>
</div>
</body>

</html>

elleg · 05-06-2009, 10:29 PM

I was able to successfully implement the 'Holly Hack' to solve my problem. By adding a height of 1% to the dl rule--the dl being my relatively positioned element containing the disappearing float, the float no longer disappears.

css, just for the dl:

Code:

dl {
	border-bottom: 1px dashed #993333;
	border-top: 1px dashed #993333;
	background-color: #EEEEE0;
	padding: 0.5em; 
	margin: 15px 0 15px 0;
	line-height: 1.5em;
	overflow: hidden;
	position: relative;
	height: 1%; /* To prevent IE6 from hiding contained floats */
	}