From the course: Responsive Layout
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Floats - HTML Tutorial
From the course: Responsive Layout
Floats
- [Instructor] A common way to lay out webpages before Flexbox and Grid was using floats. A float in CSS says the block elements should wrap around other elements instead of starting after the element. It was originally created to allow text to wrap around images. You see this in something like a newspaper or magazine where you want to take up all the available space on the paper. On a website, you would want to do the same if you have an image mixed in with text. This is what the page looks like without float. You have a paragraph, then the image starts right below it, then the next paragraph below the image. To get the text to wrap around the image, you give the image a property of float with a value of left or right, so in the code here, I have a photo which has a class of photo, so that's how I'm going to style it, so photo, and then float colon left, save, and refresh, and now everything after that photo goes around it, taking up the available space to the right of it. The text…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.