Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, I'll show you an alternate approach to assembling our image using CSS instead of tables. Many people try to avoid using tables for layout, preferring instead to use CSS. Without getting into which approach is better, they both work just fine. I'll show you here how you can do this same layout using CSS. So here you see the same exercise we had that we did tables. This is a CSS version. You can see that it looks exactly the same as the version that's done with tables.
So let's take a look at the code that makes this happen. So this is our CSS version, and here is the tables version. The tables version you're already familiar with if you did the exercise with the tables version in this chapter. And you'll notice that here's the table borders, cell spacing, cell padding, all set to 0, and your table cells-- all very easy to understand. And then here is the CSS version, and here is the style sheet. This is the CSS inside of this block here, and it's very simple; it doesn't take a lot of CSS.
And here, the structure of this actually looks very, very similar. So there are a few things that we should notice about this. Now the biggest challenge in assembling images, and this is true for both the CSS version and tables version, is to ensure that the image doesn't get disassembled when the browser window is too small for the assembled image. Images are in-line elements in HTML so the browser will try to wrap them if it can. Now for the CSS version, there are different ways that you can do it. My solution here was to put the images in vertical columns with one div for each column, and align those columns using float: left in the CSS, and then wrap it all up in an outer div with explicit dimensions, the exact size of the assembled image, and this works really great.
This makes it so that no matter how you size the browser--and here's the CSS version here-- that image does not get broken apart; it doesn't get wrapped. And that of course is also true for the tables version. So here we have something that's working exactly the same. The difference is that it's organized just a little bit differently. In the tables version, we have them organized across because that's the way that table rows work, so 1, 2, 3, 4, 5, 6, 7, 8, 9. That's actually the way that I numbered the images.
For the CSS version, I have got 1, 4, 7, 2, 5, 8 and 3, 6, 9. These are vertical; these are all the ones in the left column; these are all the ones in the middle column; and these are all the ones in the right column. CSS works really well for column layout, and so here instead of laying it out by rows, I laid it out by columns, and that made it work well. In the CSS, for each column--and this is the column layout here--we have a float: left and a margin: 0 and a padding: 0.
So each column will float right up against each other, and they'll actually stack the first one on the left, the second one to the right of that, and the third one to the right of that, and that's how float: left works in CSS. And then there is this outer div, and that one here is cutapartOuter. And that outer div has the exact width and height, and that helps it to know not to break apart. So you'll notice that I used an ID selector for the outer one because I know that there is going to be just one of those in the entire document, so I used an ID selector for that. And for the classes for the individual columns, I used a class selector called cut apart column (cutapartCol), and I used the same class selector for each one of these.
And that allows me to really minimize the amount of CSS that I have here. So it's really not a lot of CSS to make this happen, and it works really well. Now you'll also notice that I put the CSS inside the document. I did that because it makes it easier to describe here in the movie. You can easily put this in an external CSS style sheet. It could be incorporated into something else. It could be incorporated into the rest of your site and it could be organized just as you would with any CSS. So that's how we get exactly these same results using a CSS style sheet for layout instead of using tables for layout as we did in the previous version.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99141 Viewers
56 Video lessons · 112418 Viewers
71 Video lessons · 81237 Viewers
131 Video lessons · 39013 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.