Click to See Complete Forum and Search --> : Holly hack explain? And clear questions
earth2mac
11-05-2007, 03:21 PM
HH:
how does this work? This is applied to container so it expands for content? Do I need 1% or can I use other dimensions like actual size of container like if it's 100px?
.buggybox {height: 1%;}
Clearing:
I understand clear the float with the new div that comes after. But, What about it the container div isn't floated but the elements inside are floated. Since the container wraps this do I still need to clear with second container that comes after this first one?
http://www.quirksmode.org/css/clearing.html
earth2mac
11-05-2007, 03:34 PM
This question:
I understand clear the float with the new div that comes after. But, What about it the container div isn't floated but the elements inside are floated. Since the container wraps this do I still need to clear with second container that comes after this first one?
Kravvitz
11-05-2007, 07:45 PM
Are you using the PIE/Aslett easy clearing technique (http://www.positioniseverything.net/easyclearing.html) or just the Holly Hack?
It's complicated.
Internet Explorer and the Expanding Box Problem (http://www.positioniseverything.net/explorer/expandingboxbug.html)
Min-Height for IE/Win (http://www.dynamicsitesolutions.com/css/min-height-for-msie/)
The overflow declaration (http://www.quirksmode.org/css/overflow.html)
Setting a percentage height is useless (except to give an element hasLayout in IE/Win) if the parent element doesn't have a set height.
To understand what hasLayout is, read some of these: (I discourage the use of the underscore hack, which the first one recommends though.)
http://www.satzansatz.de/cssd/onhavinglayout.html
On Having "Layout" (http://dean.edwards.name/weblog/2005/06/layout/)
"HasLayout" Overview (http://msdn2.microsoft.com/en-us/library/bb250481.aspx)
hasLayout Property (http://msdn2.microsoft.com/en-us/library/ms533776.aspx)
A TripSwitch? - set hasLayout to true without a dimension (http://www.tanfa.co.uk/css/examples/haslayout/tripswitch-demo.asp)
IE/Win: inline-block and hasLayout (http://www.brunildo.org/test/InlineBlockLayout.html)
Clarification of inline-block and hasLayout (http://www.sitepoint.com/forums/showthread.php?p=3208176#post3208176)
earth2mac
11-05-2007, 08:02 PM
not getting the question answered. Do I need to clear a container that follows the one with the floats inside (although that first one isn't floated itself, just it's contents)???
earth2mac
11-05-2007, 08:04 PM
example:
<div id="container">
<div id="float:left">
</div>
<div id="float:right">
</div>
</div>
<div id="conatiner2">
</div>
Kravvitz
11-05-2007, 08:42 PM
Yes, but we kind of need to know the answer to my question in order to answer yours.
Setting the height triggers hasLayout in IE/Win. An element with hasLayout will contain any floated children. (The exception is if a float is taller than the set height of an element when IE7 is in standards mode.)
Other browsers need different code to make them contain and effectively clear floated children without extra markup.
So the answer is a conditional no, you do not need the extra <div> to clear the floats.
This should show that overflow:hidden will do the clearing, except for IE6 which also requires height to trigger hasLayout:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>floated</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {border:1px solid #000; margin:1em;}
#container {overflow:hidden; height:1%;}
</style>
</head>
<body>
<html>
<body>
<div id="container">
<div style="float:left">floated left
</div>
<div style="float:right">floated right
</div>
</div>
<div id="conatiner2">
conatiner2
</div>
</body>
</html>