Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE: Clearing Nested Floats

Status
Not open for further replies.
jpadie

jpadie

Technical User
Nov 24, 2003
10,094
FR
I am having an issue with clearing a div containing nested floats in IE7 and IE6. needless to say it works fine in Firefox.

the "old" ways of adding an intervening div works
Code: 
<div style="clear:both;visibility:hidden;display:block;">&nbsp;</div>
as does adding a height to the container div (even a percentage height).
however I typically use (and prefer) the class:after solution instead.

examples of what i am talking about are up on a server at caeltgallery.no3.co.uk/Untitle-1.html.

for others accessing this thread in the future the source code is also here:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<base href="[URL unfurl="true"]http://caeltgallery.no3.co.uk/"[/URL]  />
<style type="text/css">
/* curved corners courtesy of cssplay.co.uk */
html, body {
	padding: 		0; 
	margin: 		0; 
	color:			#333333; 
	font-family:	"Trebuchet MS";
}
form {
	padding:		0; 
	margin:			0;
}
.displaycabinet {
	margin: 		100px;
	width: 			220px; 
	background:		transparent; 
	text-align:		center;  
	display:		block;
	float:			left;
}
.displaycabinet .displaycabinet_internal {
	border:			0 solid #08c;
	border-width:	0 1px;
}
.displaycabinet .top {
	clear:			both;
}
.displaycabinet .displaycabinet_internal .top .lh {
	width: 			50%; 
	float:			left; 
	text-align:		center;
}
.displaycabinet .displaycabinet_internal .top .rh {
	width:			43%; 
	float:			right; 
	text-align:		right; 
	padding-right: 	3px;
}

.displaycabinet .bottom {
	clear:			both; 
	width:			200px; 
	margin:			0 auto; 
	margin-top:		10px;
}
.displaycabinet .bottom .bottom_internal {	
	border:			0 solid #08c;
	border-width:	0 1px;
	padding-left:	3px;
	padding-right:	3px;
}

.displaycabinet .bottom .bottom_internal .title {
	color:			red;
} 
.displaycabinet .bottom .bottom_internal .info {
	text-align:		right;
}
.displaycabinet .info {
	clear:			both;
}
.displaycabinet .info_fixed {
	clear:			both;
	height:			100%;
}
.displaycabinet .inforow {
	clear:			both; 
	font-size:		x-small;
}
.displaycabinet .inforow .infoleft {
	width:			45%; 
	float:			left; 
	text-align:		left;
}
.displaycabinet .inforow .inforight {
	width:			45%; 
	float:			right; 
	text-align:		right;
}
.displaycabinet .actionbar {
	text-align:		right; 
	width:			200px; 
	margin:			0 auto; 
	margin-top:		5px; 
	padding-top: 	2px;
}
.displaycabinet .info:after {
    content: 		"&nbsp;"; 
    display: 		block; 
    height: 		0px; 
    clear: 			both; 
    visibility: 	hidden;
}
.xtop, .xbottom {
	display:		block; 
	background:		transparent; 
	font-size:		1px;
}
.xb1, .xb2, .xb3, .xb4 {
	display:		block; 
	overflow:		hidden;
}
.xb1, .xb2, .xb3 {
	height:			1px;
}
.xb2, .xb3, .xb4 { 
	border-left:	1px solid #08c; 
	border-right:	1px solid #08c;
}
.xb1 {
	margin:			0 5px; 
	background:		#08c;
}
.xb2 {
	margin:			0 3px; 
	border-width:	0 2px;
}
.xb3 {
	margin:			0 2px;
}
.xb4 {
	height:			2px; 
	margin:			0 1px;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE float issue test</title>
</head>

<body>
<div class="displaycabinet" id="painting_11">
	<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
	<div class="displaycabinet_internal">
		<div class="top">
			<img src="paintings/thumbnails/picture_44c8f05420f49.JPG" alt="painting title" class="paintingthumbnail"/>
		</div>
		<div class="bottom">
			<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
			<div class="bottom_internal">
				<div class="title"> 
					painting title
				</div>
				<div class="info">
					<div class="inforow">
						<span class="infoleft">
							Adie, Justin
						</span>
						<span class="inforight">
							£2000
						</span>
					</div>
					<div class="inforow">
						<span class="infoleft">
							Oil on canvas
						</span>
						<span class="inforight">
							15 x 14 (h" x w")
						</span>
					</div>
				</div>
	<!--			<div style="clear:both; visibility:hidden; display:inline;"></div>	 -->
			</div>
				<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
		</div>
		<div class="actionbar">
		<form action="Untitled-1.html" method="post">
				<input type="hidden" name="painting_id" value="11" />
				<input type="hidden" name="freshtest" value="freshtest_44d30a1b0da8e8.05160689" />
				<input type="image" name="action" value="editPainting" src="images/pencil.gif" onclick="editPainting('11'); return false;" />
				<input type="image" name="action" value="deletePainting" src="images/delete.gif" onclick="deletePainting('11'); return false;"/>
		</form>
		</div>		
	</div>
		<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>	
<div class="displaycabinet" id="painting_11">
	<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
	<div class="displaycabinet_internal">
		<div class="top">
			<img src="paintings/thumbnails/picture_44c8f05420f49.JPG" alt="painting title" class="paintingthumbnail"/>
		</div>
		<div class="bottom">
			<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
			<div class="bottom_internal">
				<div class="title"> 
					painting title
				</div>
				<div class="info_fixed">
					<div class="inforow">
						<span class="infoleft">
							Adie, Justin
						</span>
						<span class="inforight">
							£2000
						</span>
					</div>
					<div class="inforow">
						<span class="infoleft">
							Oil on canvas
						</span>
						<span class="inforight">
							15 x 14 (h" x w")
						</span>
					</div>
				</div>
	<!--			<div style="clear:both; visibility:hidden; display:inline;"></div>	 -->
			</div>
				<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
		</div>
		<div class="actionbar">
		<form action="Untitled-1.html" method="post">
				<input type="hidden" name="painting_id" value="11" />
				<input type="hidden" name="freshtest" value="freshtest_44d30a1b0da8e8.05160689" />
				<input type="image" name="action" value="editPainting" src="images/pencil.gif" onclick="editPainting('11'); return false;" />
				<input type="image" name="action" value="deletePainting" src="images/delete.gif" onclick="deletePainting('11'); return false;"/>
		</form>
		</div>		
	</div>
		<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>	
</body>
</html>

FAOD: don't get the idea that i am an artist or trying to sell stuff for £2k. it's just dummy data to evidence the issue at hand.
 
Sort by date Sort by votes
re-reading this post I realised that i omitted the question!

Question:
what am i doing wrong to cause the :after method of floated div clearing not to work?

tia
Justin
 
Upvote 0 Downvote
The reason is simple. IE does not support :after pseudo class. At least not IE6. I am not sure about 7. However, the solution is not that easy. It used to be that [tt]overflow: auto;[/tt] on the container would work the way one would want to, but that seems to have failed in IE on your page as well. Plus, your height solution breaks the behaviour in my Mozilla. I would personally choose to simplify the css -- so many clears that one is unsure what they do and by simply removing some of them I realized that -- they do nothing. I might play around a bit more later with it.
 
Upvote 0 Downvote
thanks.

thinking about this a bit more, i think the solution might have to be to leave the height fudge in AND keep the pseudoclass declaration.

firefox does not seem to complain about the height, but just in case some other browsers do, i'm going to put it in the comment hack:
Code: 
/*  \*/
* html .displaycabinet .info {
	height: 		100%;
}
/*   */
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
171
pendle666
pendle666
1DMF
  • Locked
  • Question
Stop IE showing tooltip for required form fields on hover 1
Replies
0
Views
71
1DMF
1DMF
1DMF
  • Locked
  • Question
IE 11 Compat Mode &amp; @font-face with woff 1
Replies
4
Views
140
1DMF
1DMF
tshad
  • Locked
  • Question
IE not constraining image size 1
Replies
14
Views
211
ChrisHunt
ChrisHunt
1DMF
  • Locked
  • Question
drop shadow / shadow box in IE
Replies
3
Views
104
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top