HTML5 & CSS: Apply Multiple Columns


Hi, my name is Riotta Scott, and today I’m
going to show you how to create multiple columns in CSS3. I’m using Dreamweaver CC here so that we can
see the design view as we work, but I’ll type directly into the source code and the style
sheet so that those of you who are using a text editor like Notepad, can follow along
with the steps. In this example we have a story with text
that spans the width of this section. I’m going to show you how to split the content
into two or more columns. We’re going to use the column properties of
CSS3 to reorganize this page into three columns. And let’s just take a look at the source code. All of this content is contained in an article
tag here, and to that tag I’ve applied the classes columns and rounded. Rounded is just to create these little rounded
corners, and I’ve applied that class to images and things as well. So we can ignore that one, but we’re going
to take a look at columns. So let’s go over here to our style sheet. And this is the columns class. Right now it
just has information about how wide it is, and margins and things like that. We’re going to add the column properties right
here, and I’ll talk a little bit about each one as we go along. The first one I want is column-count, and
of course we add our colon, and then we’ll put our values in here. And the value is simply how many columns you
want. And I’m going to make it 3. I’ll add my semi-colon so I can start a new
property here. Alright, so column-count, three. The next thing we want is column-gap, add
a colon there, and that’s just how thick we want the gap between columns. And I’m going to just go with 10 pixels here.
So 10px, and then my semi-colon. Next one is column-rule, and column-rule has three different properties.
Actually, you can see this in the hint that’s showing up on Dreamweaver right here. So there’s column-rule-color, column-rule-style,
and column-rule-width. And they actually have to go as width, style,
and color – in that order, if you combine them all. And that’s what we’re going to do here. So instead of adding each of those separately,
we’ll just do column-rule, and our colon, and then we will type in the thickness, and
I’m just going to type “thick”, and then a space, not a comma, and… I’m going to do this one dashed – most people
would probably use solid, that’s the one used the most. And finally I’ll put in a color, and I’m just
going to use green, to be easy. And we’ll put our semi-colon here, and we’ll put our final property in… and that is column-fill and this one is not necessarily supported
by every browser, but we’re going to put balance here, and that
will balance the columns out so that they’re pretty even [along the bottom]. Alright, so I’m just going to click Save all…,
and if you’re in Notepad, just make sure you save any changes you made and in this case we only changed things in
the styles. Let’s take a look at this in some different
browsers, and see how it’s going so far. And it is not, obviously, showing up in [Dreamweaver’s
Live View], so we’ll just look at browsers and see it’s doing. I’m going to take a look in Chrome. It is not working in Chrome. We still just
have one column. Let’s try Firefox. It is also not working in Firefox. And finally we’ll try good ol’ Internet Explorer… and that’s just crazy! Can you believe that
Internet Explorer is ahead of the game in making columns work! We still have some problems here, like, this
just doesn’t look very good. We’ve got the heading all squished in one
column, and other columns start too near the top here. So we’ll have to do a little more tweaking. But we also need to take care of the fact
that it’s not working in the other browsers, so I’ll do that next. Now, before I show you how we can get the
columns property to work in some of the other browsers, let me show you something you might find really
useful. We can go to caniuse.com and we have different CSS properties, HTML5,
and some other things that we can look up to find out how your browser, or various browsers,
support those things. I’m just going to type in columns, and right
at the top we see CSS3 Multiple column layout. I had clicked a button earlier that said I
wanted to see U.S. percentages. So if we hover over different versions, in
this case Internet Explorer, we’ll see in red that the columns properties are not supported
in 6, 8, or 9. But the green shows us that it’s completely
supported in IE 10 and IE 11. Let’s go over here and check out the different
versions of Firefox. All of these are in this lighter green, which
means it’s partially supported. And you’ll see that it says – I can’t point
at it because it goes away when I do that – but you’ll see that it says “Partial support
with prefix -moz-” So that’s what we’re going to do, is add these
vendor prefixes to our styles in a moment. That’s how we’ll get them to work. Chrome – same thing – just partial support.
In this case we need to use the vendor prefix -webkit-. And Safari will work with -webkit- as well. Opera is also -webkit- and so forth -webkit-… -webkit-… -webkit- So, let’s go on back to our webpage. What we’ll do is come down here, and let’s
highlight column-fill, or column-count through column-fill. Get all of that, and I’ll use Ctrl + C on
my keyboard, and I’m going to paste it twice more (Ctrl + V). So there’s once. And twice. I accidentally have this indented, but that’s
fine because now I can see where my copied styles start. So let’s start with the vendor prefix -moz- and then I will copy that (Ctrl+C) and paste it in front of column-gap, column-rule, and column-fill. And some of these may not work even with the
vendor prefix, but we’ll see in a moment what is working. And now we’ll add to the other four that we
copied, we’ll add -webkit-, and then I will copy that. Ctrl + C, and I’ll paste, Ctrl + V in front
of column-gap, column-rule, and column-fill. And then we’ll save this, and take a look
at it in the different browsers. So we already know that Internet Explorer
is working. So next I will try Chrome. I’ll go up here
and refresh. Alright. That -webkit- prefix did help this
work. Now we still have a little problem with things
coming up here, and I would like this to span all the way across the columns (the header). We’ll check that in a minute. Let’s look at Firefox. There’s Firefox, and I will refresh it.. and
the columns are working there as well. So we have a little bit of tweaking to do,
but the vendor prefixes did help us at least get the columns in there. So let’s go back to our HTMLeditor, and we’re
going back into our styles.css document. And I’m going to add something so that this

tag – this heading here – will span across the 3 columns. So we’ll use the columns class again and we’ll use h1 as the selector and we’re going to use a new property called
column-span, I’ll add my colon, and you only have a couple of choices: you can
span it across 1 column, which it’s already doing; so that’s the default, or all. It would be nice if you could just span it
across two because maybe you want to leave that third column starting up at the top. But we don’t have that choice; it’s just one
or all so we’ll go ahead and type all and I’ll save this and we’ll take a look at the different browsers
and see if it’s working. Let’s start with Internet Explorer, since
that one worked for us last time. Refresh. And it is working. That

tag is spanning the three columns. Let’s try Chrome. Refresh. And it does not work here. It probably needs
the -webkit- prefix. And what about Firefox? Refresh. And that doesn’t work. So we will try the -moz- prefix. So once again, I’m going to Ctrl + C to copy
that property. And I’ll Ctrl + V to paste it twice more. And then I’ll add the vendor specific prefixes,
-moz- and -webkit- Then we’ll save, and then let’s open up Chrome. And refresh once again. Yay. That works. What about Firefox? Refresh. No help. So Firefox isn’t up with the game
on that. Let me just show you something that you could
also do instead. We could just come out here to the HTML, so
let’s find the beginning of this article in the HTML. And… I hate to do this… because then it’s
not in our

, but we could just pull the

out so that it’s above our

section,
if you really had your heart set on that going all the way across. So let’s do that, and I will hit Save. Open Firefox again. And refresh. And there it does come across there. You probably also need to put a little padding
in here so that it’s not right up against our logo at the top, but for the most part, things are working. We could do a little bit of cleanup here with
things like the wrapping, because that doesn’t really work very well
with columns that’s a very small image, and it could probably
just go in the top or something. So you’re always going to have to tweak a
few things. But for the most part, it works pretty well. Oh and by the way, this is how balance works
– it tries to make sure that they’re pretty close at the bottom. And let’s take a look at Chrome. Seems like
balance is working pretty well here as well. And what about Internet Explorer. Internet Explorer does not seem to support
the balance part, so we’ve got a bunch of gap here instead of those things balancing. So I’m not sure what’s going on there. You’d
just have to make some decisions… maybe add some more pictures down here if
you really have your heart set on it balancing. That’s about it for columns and how to use
vendor prefixes in our properties.

Add a Comment

Your email address will not be published. Required fields are marked *