Floats can be used to create column layouts often used for grid designs. Learn how to use floats to create a two-column layout for the content in your projects.
- [Instructor] Before we go any further with our CSS in our project, let's add the box model fix. We can copy this snippet from paulirish.com, and add it to our CSS file. This is going to go at the very top of our style sheet. This is about as global as it gets, since this style is applied to every single element on the page. Now let's go back to the header in the HTML. I've added an extra paragraph just to demonstrate how to keep the text from flowing underneath. So this is what it currently looks like right now.
The first step is to put a box around all of the text elements to group them as one component. Let's go back to the HTML file. We'll use a div tag to create the container because this is only for styling purposes. And we'll add a class as well. Let's name it something descriptive. We're going to be creating two columns, so we can call it something like column left or right, or column narrow or wide. I'm actually going to abbreviate my column to just col. C-O-L. And go with col narrow, and col wide.
I'll be using these column styles again to align the content in the work experience section. So this is going to be a reusable style. So let me go ahead and put that div around the text. So this one is going to be my wide column. So I'll give it a class of col-wide. And close the div, right around the last paragraph.
Now for the image, this is the only element that's going to be floated left. So I don't need to add another box around it, but I will add the class. So this will be my narrow column. The next thing you'll need to do is to define the widths of the columns. We can go with fixed widths like 300, and 650 pixels to equal our current container size of 950 pixels. But if we use percentages instead, we'll make the CSS more flexible.
And that way if you decide to change the width of the container, the columns will still be sized relatively. So back in our CSS file, I'm going to add my column styles in the global section. So I'll add it right underneath the content-wrap. So how big do we want it to be? Let's say I want the narrow column to be a third of the total width. So I could be really precise and set the width to 33.33%. There's no limit to how many decimals you can use. But I think I'm going to keep my math simple today, and just set the col-narrow to 30%.
Which will then leave me 70% for the wide column. Now let's remove the float size and margin values from the profile image, since we'll be using these new global column styles instead to align the content. So I had my profile-img in the header area. So I'm going to remove the width, the float, and the margin. I'll keep the border radius since that's what's making the image look like it's a circle.
So let's go ahead and save our changes, and just see where our page is at. I removed the float from the image, but now you can see that the width has been applied to the text content. So let's go ahead, go back to our CSS and add the float. So I want both of these columns to float, so I will give them both a value of float left. Since both columns are sized to equal 100%, floating them left or right doesn't really make a difference unless the components are smaller than the total width of the container.
So let's see what the page looks like right now. Now we have both columns lined up side by side. And the text no longer flows underneath, because they are in separate containers. We took the margin off the image to ensure that the two columns would fit. But we should add some spacing back in, so the content within the two columns don't appear so close together. We could add space to the right of this column, or the left of this column, or even add a little bit of space to both.
There are a couple ways to do this. If we use margin, the widths of the columns will have to be adjusted. Even with the box model fit, because margin adds space outside of the element. But if we use padding, then we don't need to adjust the width. Because with the box model fix, padding doesn't affect the total width. There's no real right or wrong in this scenario. Whether you use margin or padding, it's really up to what you're trying to achieve, and knowing the difference between the two. Let's go back to our CSS file. I'm going to stick with using padding, so I can just leave my widths as is.
And I will just add padding to my wide column. Just a little bit of space on the left side. So that will be padding-left. And I'm going to add 20 pixels. So because padding adds space within the element, and doesn't affect the total width with the box model fix, we can actually use a fixed unit within the container. Because it won't affect the total width of the element. So let's save that, and check the change in our browser.
So now there's a little bit of space. So we've created these global columns, so that we can reuse them again throughout the site. So I would like to also float my work experience area. I want some content to be on the left, and the description of the job items on the right. So let's go back to our HTML, and add in those columns. So in my narrow column, I'm going to add the H3 and these two paragraphs.
So let's open a div here. Give my class of col-narrow. And I will close it right after the date. And this will be col-wide.
So make sure you add that to all your job items. I have about two more here, so let me quickly add those in. And then we can see how it affects our page.
Okay, and I'm making sure that my HTML continues to be indented properly. Just so that I can see which elements are nested. Alright, let's go back to our browser. Now, depending on how much content you have on your right side wide column, your page might not look wonky like mine. But there is a reason for this. So my first job description, the content on the wide column is shorter than the content on the left column.
So what's happening here, is this block is trying to float left, but it's also trying to fit into whatever space is available. So let me just add a border around the columns so I can visually demonstrate.
Okay, so because this content is shorter than the content on the left, this element is still trying to float left, but it's also fitting itself into the available space. So to fix this we'll need to make sure that the right column is always at least the same height as the left column. Even when there's not enough content. There are a few ways to do this. And one way is with the new flexbox styles I had mentioned in an earlier lesson. But we're not covering this new technique just yet in this course. So let's leave that option out for now.
Another way is to give it a minimum height using the CSS min-height property. If the content is longer than the min-height value, it will continue to flow downward. And that's why we're using min-height rather than just the height property which is fixed. So back in our CSS, let's add that to our columns. A value of 175 pixels should do the trick. You might have to adjust your values depending on how much content you have.
Let's check our page again. And now everything is aligning as expected. And when the content flows longer than 175 pixels, it can still flow downward. So now I can take this border off. There's more we can do to improve the page design, and in part two of this series we'll continue to work on the project. As well as introduce more concepts to level up your CSS skills. We learned how to use a lot of different CSS properties, and applying these styles to the actual page design often requires a lot of problem solving.
It may not always have clear-cut right or wrong answers. It will take some time and practice, but the more mistakes you make, the better you become at fixing them. Don't be afraid to experiment. I would suggest keeping a copy of your project at this state so we can pick up where we left off in part two of this series.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property