Clearing floats


show more Clearing floats provides you with in-depth training on Developer. Taught by James Williamson as part of the CSS: Styling Navigation show less
please wait ...

Clearing floats

Floating menu items can cause two big problems, first, their parent elements can collapse and not contain the floated items inside, and second, floated items can disrupt the layout of elements that come after them in the source order. Now both of those issues can be handled by properly clearing the floats. So we are going to experiment a little bit with that in this exercise, and I have opened up the horizontal.htm from 04_03 directory. And there have been a couple of changes to this, so I want to scroll down into the code and show you what I am talking about.

I've added a nav selector, that's giving the navigation element the background of red, and then I took off the existing float from the ul, li, and I have also removed that one selector that was targeting the link. Just because I want to start fresh and show you guys really what goes on when you start floating some of these menu items. Now, if we preview this page, currently in the browser we are back to displaying vertically instead of...

Clearing floats
Video duration: 6m 12s 5h 14m Beginner

Viewers:

Clearing floats provides you with in-depth training on Developer. Taught by James Williamson as part of the CSS: Styling Navigation

Subjects:
Developer Web
Software:
CSS
Author:
please wait ...