Even more-so than z-index (which we covered a few weeks ago), the float property is known to cause episodes of hair-pulling and monitor-punching. It seems simple enough in theory, but there are plenty of quirks to watch out for. We go from start to finish in this screencast defining what float is, how it works, how and why to clear them, and some browser differences.
Links from video:
Great Screencast, i’ve had the IE6 problem you talked about, it all makes sense now.
Thanks
Great stuff.
But i missed the easy clearing method. That one i use very often.
And btw: i love markdown
Chris thanks alot for your amazing stuff in here!
You can also fix the IE6 double-margin bug by applying “display: inline;” to the respective floated element.. much easier and way cleaner than a javascript-solution (also, it’ll work for people who have javascript disabled).
And no.. I have no idea why this works, but then again, I have no idea why IE6 doesn’t render it properly in the first place, so there you go.
Great tutorial. I have just dropped support for IE 6. Ticks me off all the time.
P.S. I like the design
Nice, Helps a lot! If you want another idea how about tables, I know they are classic and outdated, but how about for organizing huge amounts of data?
@Nathan C
What do you tell your clients?
“sorry i currently don’t support the worlds most distributed browser “
i guess ie6 isn’t worth it anywho..
Nice tutorial Chris. I heard last week i think, that Firefox now had 20% of the browser market, which is great news and hopefully we can get rid of IE altogether!! Just wondered Chris on the last part with the article, it shows in a diagram with the side bar being pushed down in IE6, what is the font that is used where it says “Push Down”??
aboleo, Easy Clearing is very inconsistent. Not always work.
Nice article for begginers Chris :)
Hey Chris,
Been enjoying your screencasts since you started them and I have learned a ton.
I took HTML and CSS in school, yet I’ve found that these web tutorials are so much more efficient and knowledgable.
Keep up the good work!
Nacho, easy clearing is a great method, if you know how to use it and it is not as inconsistent as you might think. Chris should have mention it anyway ;)
Excellent videos! Been watching for some time now. Keep it up!
Re: 6:40 into the screencast: One of the easiest reasons to understand why a containing element "collapses" when floats are inside, is so that multiple paragraphs will wrap around a really tall floated image that's contained inside the first paragraph tag.
Actually, IE6 is only used by approximately 20%, according to w3c. Another 26% user IE7, and a growing portion (44%) use Firefox.
It all really boils down to who the target user is. IE6 is only a piece of the Microsoft family, a lot of people forget that IE7 comprises a little more than half of the total number of IE users.
Hi everyone :-)
Great Vid !
I was wondering if anyone can help me with something….
Im a mac user, and i have no means of buying a pc, but i want to be able to check up on my websites on IE 6-7 etc…..
I see on the video that it's possible… can anyone tell me how this is done?
Do I have to run Parallels to do so? (Or something similar?)
I currently use the browsershots.org website, but i would like to be able to see what I do on IE….
Thanks so much for any help you guys can provide.. :-)
Great video, as always. I love that you cover the more complicated stuff to the basics.
I like to view videos on my iphone and would love to see a iphone feed of the videos. The only requirements are that the resolution is max 640×480 and it uses h264 or MP4 for video codec and aac or mp3 as audio codec.
Either way, keep making your videos, they are really useful!
I was just explaining clearing floats to a designer I work with. This is a great help!
A way that I like to have a parent container wrap around floated elements is the float the container. I then set the width to 100% or to the fixed width that the container should hold, thus not allowing any elements below the container to wrap.
Sounds like your talking about the Float (Nearly) Everything Method.
Great vid Chris! Although, I have to admit I was a little distracted at ~1:26. You opened Firefox and I saw "…en nerd" in your google search and my mind began to wander. :^)
Ha! I believe I was searching for what the internet considered the difference to be between a "geek" and a "nerd". I'm doing a blog design for a client with the word "geek" in the title, I wanted to maybe play off that a little.
These screen-casts are fantastic. You've done a brilliant job of unravelling this topic Thanks.
Another great screencast – it helped me finally fixed my IE6 issues… stupid IE6.
Excellent,
Thank you for these great lessons , great help to improve my very light html and Css knowledge
Keep up the good work
Jean from France
@Garro- In the vid Chris is using VMWare which will cost you about $80 plus you will have to buy a copy of Windows. Personally I have an old Sony laptop running XP (and Ubuntu) and that's where I do all my testing for the dreaded IE.
WoW ! you are doing an excellent work. Thank u & continue like this
How to float center an element center?
really look one, thanks for the tutorial
these tutorial are so cool. but somebody knows how to put a fotter like this page but whit an information too short. i have been trying whit this problem but always rest a big white space under the early mentioned footer.
Great screencast! Floats are fragile things and I like the way you demonstrated float bugs and how to resolve them.
Hey, Codeweavers has a great solution that's about US$40 bucks that allows you to run some MS stuff without buying windows. Works great, that's how we check IE6. Just google it and it will come up.
Great cast! Thank you!
You look completely diffrent, than I have imagined you ;) .
Man that sure fixed my current issues! I'm new to CSS and your examples are so straight forward and easy to follow.
wow. I totally coincidentally sat down to watch this tutorial, and you fixed my ie6 problem! I've been avoiding having to deal with it. Didn't know about the margin-right/float-right thing. Thanks so much for throwing that tidbit in!
I have been web programmer for quite a while and just started to learn CSS to stop inlining style. Your video is wonderful and will save me a lot of time. I cannot say more thanks to you.
Thanks
Longmatch
Top stuff Chris. I come back when I get stuck on a project with IE6 layout issues. Thanks.
Thanks! I learned all I need to know about floats here :P. I was having many many problems with IE ¬¬ and now I know how to solve them :D
Great videos. Really love them. Can you write a short article about floating the sidebar to the left of the main content?
Thanks
Has anyone tried the Float (Nearly) Everything method? You can read more about it over at orderedlist.com I prefer it over the overflow method.
Just found this site and have watched 3 tutorials so far, and they’ve all helped. Amazing site, excellent work (vids and the site itself.)
THANK YOU!!!
I had not touched a website I had been working on for ages and the layout was killing me. I had always wondered why FireBug would only highlight a small portion of the div when I hovered over it and did not extend the way it should.
It’s really hard to understand this concept, but visually seeing happening will definitely make it easier to remember in the future. Thanks again!! :-)
Thanks for the screencast, that was very illuminating.
Thank you..
It was very helpful to me but what if all the blocks are not of same size?
i am following the screencast exactly but not firefox and chrome don’t float the div’s, they display it one underneath the other. I must be missing sth, but i cannot see it at all :(
Cool!
I’m so happy watching this tutorial. Finally, I understand what the float is. It’s completely clear direction. You’re great teacher. I like it. Thanks.
Absolutely Fantastic !
I’m searching about float in css and found your site. Beneficial and understandable screen-cast.
We are glad to see your attractive site. I appreciated your teaching and learning stuff.
Thank you !
Cool work,it helped me finally fixed my IE6 issues on my alltechmess. Thank you for sharing an important article.
great tutorial , enjoyed learning here , Thanks a lot :) !!!
Thank you so much for this tutorial! I’ve been struggling with floats and this finally turned on the light bulb over my head.
Great. Thanks.