In the previous video, you reviewed using display as a layout option for horizontal navigations. In this video, use float for comparison.
- [Instructor] Using the same JS fiddle as the last exercise…let's take a look at how to use float for the navigation.…Since we're only using links,…the navigation items are already aligned horizontally.…But we can add a float left to the link.…If we add float left to the link,…two things will happen.…No space between the links.…But also the purple nav background disappeared…because all the child elements are floated.…The parent container does not recognize the height…of floated child elements and collapses to a height of zero.…
So what we'll need to is self-clear the float.…I'll use the overflow method…and give it a value of hidden…and this will self-clear the floated elements.…This must be added to the parent element…and now the purple background is back.…But here's something else about floats.…If you apply a float to an inline element…like we just did with the links,…the browser will automatically switch…the display of the element to block,…so that means I can add padding to the link…without adjusting the display value.…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 20m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.