Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
-
CommentAuthorDarren Hoyt
- CommentTimeJul 20th 2006
I've been using a float-clearing method I read about on Position is Everything for awhile now, though I really don't like how it shows up in the markup.
Example (inline):
<div style="float: left; width: 100px">Left Navigation</div>
<div style="float: left; width: 600px ">Main Content</div>
<br class="clearfix" />
<div class="footer" style="width: 700px>Copyright Info</div>
The CSS basically reads like
br.clearfix {
clear:both;
margin:0px !important;
padding:0px !important;
height: 1px;
font-size: 1px;
line-height: 1px; }
...and it's evidently safe to use with all browsers.
How would you guys handle a basic float-clear like the one above? -
-
Uh, if you're using the PiE .clearfix CSS code that they provide, then you're using it wrong. It's meant to fix the parent container, not to be applied to a clearing element.
What you've got is exactly the same as this:<div class="container">
<div class="floated-left">foo</div>
<div class="floated-right">bar</div>
<br style="clear:both;" />
</div>
Which is what that method was developed to avoid. It's meant to be used like this:<div class="mycontainer clearfix">
<div class="floated-left">foo</div>
<div class="floated-right">bar</div>
</div>
Based on your CSS posted above it looks like you've recoded or stripped down what PiE actually offered up which in it's entirety is this:/*
* See http://positioniseverything.net/easyclearing.html
* for a description of this code.
*/
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {
height:1%;
}
*+html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* End hide from IE-mac */ -
I was going to say the same, I've only added the clearfix class directly to a div. If you want to disguise it even more why not rename it cf or something shorter?
-
-
CommentAuthorDarren Hoyt
- CommentTimeJul 20th 2006 edited
Thanks for the feedback.
I can't remember where I saw it used the way I used it, as a class on the<br />tag, but I swear the idea wasn't mine! I've just been too busy to go back and look at the method again.
So judging from this example...
<div class="mycontainer clearfix">
<div class="floated-left">foo</div>
<div class="floated-right">bar</div>
</div>
...every time you want to float two divs against each other, they must also be inside another container div which uses the 'clearfix' code? That sort of thing had occurred to me before, but had seemed kind of bloat-y.
I guess you could wrap your entire design in a container with a class=clearfix, and that would solve all the floats within it? -
-
This method is nice, but it does not always work as expected.
Let's take the following code:<div style="background:red" class="clearfix">
<p style="float:left">aaaaa…aaaaa…</p>
</div>
Body's margin and padding are zeroed. If the content (aaaaa) is long enough that it fills the whole height of the browser, a mysterious margin at the bottom appears in FF, Safari and Opera. It seems to be of about the line-height size. I can provide a test case and my solution on Sunday, if this post was unclear and if anybody was interested. -
- CommentAuthorPettyRider
- CommentTimeJul 20th 2006
Most of the time the whole clearfix/selfclear method can be solved by just clearing the next element. However, it's usually required in cases where you need the bottom of a container to clear any images floated within it, all while maintaining a bottom-border or bottom positioned background. Moreover, sometimes a cleared bottom-border can be faked by simply setting a top-border on the cleared element below.
1 to 6 of 6