Join James Williamson for an in-depth discussion in this video Floats: Solution, part of CSS: Page Layouts.
- View Offline
Well, I hope you had a good time working on the lab and getting our two-column fixed layout to its finished state. In this movie, I am going to show you how I styled the elements that you were tasked to finish in the lab. Feel free to compare your solution to mine, and remember, especially with floats, there are multiple ways that you could have achieved the same layout. So I am just going to go over our main.css file, and I have got the index.html opened here as well. These are found in the finished files directory within the 03_10 folder. So I am just going to get right into each one of the steps of our lab.
I am going to scroll down to about line 160 or so, where our basic layout styles are. So the first thing that we were asked to do was take the body and set its width to 1280 pixels, and then the next thing was to center that content as well. So to center the content, I gave it a margin of 0 for top and bottom and then auto for left and right. Remember, that splits the available space in the viewport equally to the left and right-hand sides, centering the content. Now the next thing was to create our two columns.
So in this case, I wrote a selector for article, I floated article to the left, I gave it a width of 850 pixels, and gave it a padding left of 50 pixels. So the 850 pixels plus the additional 50 pixels gives us the 900 total pixels that we need for that column. I used padding instead of margin, and margins certainly would have worked and would've been preferable had I had a background color behind the article, but since I didn't, padding works just fine. And even though I'm not as worried about Internet Explorer 6 anymore, there's an older Internet Explorer 6 bug where if you apply the margin to the same direction that you have a float, it doubles that margin.
There are ways around that, but one of the easiest ways around it is just not doing it, so I have sort of gotten into that habit over the years, and so I am using padding there instead of margins. Now if I look at the aside, it's very similar. I'm floating it to the right. Now remember, we could have floated it to the left and added a little bit of right margin to the article, but for me, it's much easier to go ahead and just float that to the right. So it's going to go all the way to the right edge of the containing element, which is the body. And I gave it up a padding-right of 50 pixels, so same thing here. I gave padding-left, here I used padding-right to hold the content of 50 pixels from the edge of the containing element.
I had to calculate exactly how much space I had left and since I started with 900 pixels, I can subtract 1280 by 900 and it let me know how much space I had remaining. And I wanted to have 50 pixels' worth of space on the right-hand side--that's my padding--and 50 pixels' worth of space between those two columns, which leaves me with 280 pixels of available space for my aside, and that becomes the assigned width for it. For the page footer, in order to make sure the page footer stays below both of those columns, I simply set the clear property to both. Remember, that's going to reestablish normal document flow and it guarantees that the page footer is going to be at the very bottom of the page.
Now the last thing that we had to focus on were those two interior elements, the news sections. So I am going to scroll down and show you guys how I handled those. All right, so about line 351 in the finished file. So for news, essentially what I did is I floated both of them to the left, and then I gave them a margin-right of 50 pixels. So that's going to make both of them appear horizontally, side by side. It's also going to space them apart by 50 pixels. But there is a downside to doing it this way, and the downside is is that both of them now have a right margin of 50 pixels.
So although it's going to space them 50 pixels apart, it's also going to push the right one maybe further away from the edge than I wanted it to be. So to deal with that, I created another selector here, and I used the sibling selector that says, hey, when a item with the class of news follows immediately after another item of the class of news, set its margin right to 0, and just sort of canceled that out. So I used a very specific selector to target that element. There are certainly other ways of doing it. There are probably more efficient ways of doing it, if I want to be honest with you guys, but that is certainly one way to achieve that.
And I'm going to go ahead and preview the index file in a browser, so we can see our finished results. As I scroll down, here is our two-column layout. Here are the two interior elements with their two columns. Notice that we have 50 pixels' worth of space on either side of our article, and aside; we have 50 pixels' worth of space between these two guys; and then we have another 50 pixels' worth of space here for the gutter. So notice that right-hand margin is not negatively impacting that. And then our footer is forced down at the bottom of our columns, exactly the way that we wanted it to.
You know you can see from doing this lab that it doesn't really take a lot of CSS to create floated layouts. I mean, I know there are other elements within the layout that we didn't style, and those certainly required a little bit of work, but we handled the main content regions: The article, the aside, the footer and then some of those interior elements as well, like these two news items. So hopefully, one of the things that you can see from this lab is not only how easy it is to use floats to create layouts, but how efficient it is to let normal float handle the bulk of the layout. The only thing we're really floating are these two main page elements.
All of the other main structural elements are being handled through normal document flow. And that sort of describes the strategy that I use, which is to let normal flow handle the bulk of the layout, and then use floats to adjust and create columns when necessary.
- Reviewing the box model
- Calculating em and percentage values
- Controlling how elements display
- Creating fixed, fluid, and responsive layouts
- Structuring content with HTML5
- Floating elements
- Using relative, absolute, or fixed positioning
- Defining column spacing
- Creating grid-based assets and layouts
- Considering mobile-design-specific issues
- Working with multi-column text
- Enhancing page design CSS Sprites