Join Carrie Dils for an in-depth discussion in this video Floats, part of Introduction to CSS.
- I've promised you more details on the float CSS…positioning property, so here we go.…Floating is a popular CSS layout technique,…but it's also one that new developers tend to struggle with,…and that's because of how the technique works.…It's based upon the relationship…of the elements that are being floated.…Think back to a traditional print design for a moment.…The boxes that hold the text can be told…to use the text wrap, or to ignore it.…Ignoring the text wrap will allow the words…to float right over the image like it wasn't even there.…Now, in web design, page elements with the CSS float…property applied to them are sort of…like these images in the print layout.…
The text flows around them.…Floated elements remain a part of the natural document flow…in that they interact with the elements around them.…This is different from absolute positioning,…which removes the element from the document flow.…Let's take a closer look at floating and how it works.…Essentially, you use a float to shift an element…either to the right or to the left of it's current position.…
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS
Skill Level Beginner
1. CSS Basics
2. CSS Specifications
3. Common CSS Concepts
4. CSS Layouts
5. Working with CSS
6. Responsive CSS
7. Going Further with CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
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.