Learn how to incorporate the box model properties (margin, padding, border, width, and height) into your projects.
- [Instructor] In the previous lesson, we talked about adding the Box Model fix to our projects. If you didn't already add the fix shown here in lines 14 to 19, make sure to add it now. Just like setting the margin and padding to zero in the body, this should be something that you add as the base CSS for all your projects. Now, let's switch over to our HTML file. We're going to create a class for each project block, so that we can float the image to the left and have the text flow around it. I'm going to call mine "Project Item" and add the class to the section element. I have two more project items, so I'm just going to copy this and add them to the other two section elements. Now, back in the CSS, let's go down to the Projects section and create a new selector, with our new class ".project-item" and I want to select just the image, so I'm going to use a descendant selector, space img and float left. Let's save our file and check for the changes. Refresh the page and now it is floated but there's some issues. I need to apply a clear somewhere and I can't put it on the paragraph because want those to flow around the image. So, I'm going to have to self-clear in the parent element instead. So, let's go back to our editor. I'm going to switch back over to the HTML file, so could look at the structure. The image element is currently being floated, so this project item is its parent element. So that's where we want to apply the self-clear to. So, we're going to create another selector, using just project item and I'm going to put it right before the project item image selector, just because this one is more general and I'm going to use the Overflow property, set to hidden. Let's check to see if the clear worked as planned. Okay, so everything's nicely lined up now but we could add a little bit of space between the image and the text. So, back in our CSS file, let's add some margin just to the right side of this image. 20 pixels should do it. Back in the browser to check. Okay, so now we have some nice spacing here but we could add another style just to visually separate these items a little bit more. So, what I'm going to do is, I'm going to add a border between these project items. Back in the CSS file we can use the project item selector. Let's add a border to the bottom of the section. I'll set mine using one pixel, a dashed style and I'm going to use my dark gray color. Let's check the style. I've added this separator line here but it's a little bit close to this image, so I'm going to add a little bit of padding. Let's go back to the CSS file. I'll set the padding in the project item to 25 pixels on the top and the bottom and zero on the left and the right. Save it, back to the browser and refresh. So that padding has been added inside the element, pushing the image away from the edge. Now that I see this floated image on the left and the text on the right, I think it'll make sense to put this title with the rest of the text. So, let's switch that around in the HTML and put the image before the H3 tag. Let's start with the first project item. I'm going to move this, the image tag right before the H3 tag. So, this will float left and everything will follow after it, including this heading. So, I'll do that for all three items. When you're copying, pasting and moving items around, it's easy to get unorganized. So, just make sure that your indentation stays the way it should and delete any extra spaces that you don't need. All right, let's save our file and check these changes. Okay, I like it much better on the right-hand side but I'm going to remove this little bit of space up here so that the heading can line up with the image. One more time, back in the CSS file. So we're going to create a new declaration block, just for the H3s contained within each project item. Let's set the margin top to zero and we'll check our design. Everything is nicely lined up now. So, one thing I'd like to point out, if you text is longer than your image, the remaining text will flow underneath. To get the image on the left and all the text on the right, a container would need to be created for the image and the text. Then both containers would be floated to create a two column layout. These days, floats should mostly be used for floating text around the image, rather than for creating columns. Later on in this course, we'll talk about the newer layout techniques and if you want to learn more about the Legacy techniques, using floats for layouts. I recommend watching my other course "CSS Layouts From Float to Flexbox In Grid".
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts