How To Contain Your CSS Floats

Loading...

Sign in or sign up now!
Alert icon
Upgrade to the latest Flash Player for improved playback performance. Upgrade now or more info.
11,021
Loading...
Alert icon
Sign in or sign up now!
Alert icon

Uploaded by on May 11, 2008

This video will show you how, using no extra markup in your html, you can contain all of your floats.

Category:

Education

Tags:

License:

Standard YouTube License

  • likes, 3 dislikes

Link to this comment:

Share to:
see all

All Comments (17)

Sign In or Sign Up now to post a comment!
  • Thank you. ^__^

  • I really like setting the parent element to overflow:hidden or auto. That way there is no clearing, and it works all the way down to IE6 with no hacks. The rule of thumb is: whenever you have floated elements - set the parent to have overflow.

  • @ehsanul Thank you kind sir! I appreciate the time and helpful suggestion. You were spot on as it worked like a charm :^)

  • Unless you still care about supporting IE 6 (and you shouldn't generally), you can just take out the _height property, and it should be fine.

  • Great tutorial! Thanks!!!

    Can you help me with EI 8 and FF3.5 though? I did a sample and the background color is barely a small sliver at the top of the div id box. Why is this and how do I fix it? Looks great in FF2 and IE 7 though.

  • and why does it sound like your mouse pad is a balloon?

  • Why is your mouse so damn loud?

  • When did you use the 'after' id ?

    Didn't see where you inserted it

  • excellent css wisdom and instruction. I did find it hard to listen with the loud clicking of the mouse and found it irritating. sorry, but thought you might like to know.

  • Great tutorial, but he needs to get a headset microphone so that you can hear him speaking rather than the typing and clicking of the mouse.

Loading...

Alert icon
0 / 00Unsaved Playlist Return to active list
    1. Your queue is empty. Add videos to your queue using this button:
      or sign in to load a different list.
    Loading...Loading...Saving...
    • Clear all videos from this list
    • Learn more