From the course: Creating a Responsive Web Design

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Clearing floats with pseudo-elements

Clearing floats with pseudo-elements - CSS Tutorial

From the course: Creating a Responsive Web Design

Clearing floats with pseudo-elements

- Now, if we look at how these three individual elements are rendering in the browser, these three asides inside of our section.main area, it's hard to understand why the Creating a modern atmosphere div is up next to this content here. And the issue is that each one of these asides has a float property. So, don't follow along here. I want to add some HTML content here just to show you what's going on, but I don't want you to add this to your project. So, back inside the HTML file, I'm going to find the section with a class of main. I'm going to add a paragraph element inside of here, and I'm just going to type in I'm inside the main section. Then, I'll go back to my CSS file. I'm going to find section.main here, and I'm temporarily going to put in a background color. So, type background-color, and I'll just put in a light gray. So, with those in place, I'll come back to the browser, and I'll hit reload. So, here's what we're going to see. The main section is only as tall now as that…

Contents