There are different ways to align elements in CSS. This video provides a review of floats and display.
- In part one of this series, we looked at two ways…to align HTML elements: float and display.…If they both do the same thing, which one should you use?…Ask any developer and they'll…probably have a strong opinion.…I think it depends on what you're trying to achieve…and knowing the pros and cons of each.…Let's do a review.…Block elements, by default, stack on top of each other…and span 100% the width of its container.…Inline elements are only as wide as their content…and display in a line, starting on the left.…
You can also apply width and height properties…to change the size of block elements…but they are ignored by inline elements.…To change this layout behavior,…use the display property with a value of inline-block…to retain characteristics of both.…One thing to note: when you align inline…and in-block elements, a space appears between the elements.…There are a couple ways to fix this,…which I'll talk about in an upcoming lesson.…Now let's take a look at floats.…When no floats are applied, block elements stack…
- 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.