SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Aug 29, 2007, 09:10 #1
- Join Date
- Sep 2003
- Location
- Northern California
- Posts
- 605
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Managing a floated div inside its parent container
As far as I understand, when a floated div is inside a parent container, it can "spill out". The two options to correct this are to 1) Float the parent container as well. 2) Add the "clearfix" class to the parent container.
Is this correct? If yes, when to use one or the other approach? If this is explained elsewhere, pls re-direct me. Thanks!
-
Aug 29, 2007, 15:32 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I don't use floats that way. I also suspect you're having a problem with one of your pages. What does your code look like?
(PS: I also never, EVER, suggest using clearfix for ANYTHING.)Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 29, 2007, 22:37 #3
- Join Date
- Sep 2003
- Location
- Northern California
- Posts
- 605
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The float in a float is working for me and I picked that tip up from a book Pro CSS techniques by Apress. I was just wondering if that approach was better/worse/neither compared with using clearfix.
I have never had luck with the clearfix but assumed I was implementing incorrectly. Clear:both works just fine.
-
Aug 29, 2007, 23:39 #4
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
I was just wondering if that approach was better/worse/neither compared with using clearfix.
I personally prefer to use the overflow property to clear floated child elements. auto or hidden depending on the circumstance.
-
Aug 29, 2007, 23:45 #5
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What the heck is "clearfix" ?
-
Aug 29, 2007, 23:50 #6
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
My gripe has to do with adding pointless HTML to a page when the element under the floated one(s) can do the job just as well.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 29, 2007, 23:51 #7
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
<br class="clearfix" />
.clearfix {
clear: both;
overflow: auto;
}Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 30, 2007, 00:15 #8
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
You mean:
Code:.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* mac hide \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide */
And it's not meant to be applied to an element like br - you don't understand it's purpose properly.
When you apply class="clearfix" to an element it will clear itself after the element.
Like in the example provided:
Code:<div id="outer" class="clearfix"> <div class="floatedstuff"> <p>Floated content to be cleared</p> </div> </div>
-
Aug 30, 2007, 00:23 #9
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oh, I understand it. Many others don't. And I've seen the BR element abused like that far more often than many realize.
I'm just against adding more markup to the code than is absolutely necessary is all. Even classes such as "clearfix".Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Bookmarks