There are a few different ways to align elements and create page layouts. In this video, review when to use float, display, and position.
- [Instructor] With so many ways to align elements,…how do you know when to use float, display, or position?…Let's go over some recommendations and guidelines,…starting with float.…If you have flexible content,…like an image surrounded by text,…float is a good option.…Your image file may change size,…or the amount of text may change,…but using float will allow the content to flow around it,…no matter the size.…Float is also good for laying out…major structural parts of your webpage,…like a sidebar in main content area.…
Display can also be used to align blocks on a page…similar to floats,…but just remember the extra space…that shows between elements.…So you need to account for that.…But you can take advantage of being able…to apply text-aligned center to the child elements,…which makes it ideal for centered, horizontal navs,…like in our project.…Also, you don't have to worry about changing…the page's natural flow and stacking order…when you use display.…Position can be used when elements need to be positioned…relative to another element.…
- 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.