Start learning with our library of video tutorials taught by experts. Get started

CSS3 First Look

Creating multi-column text


From:

CSS3 First Look

with James Williamson

Video: Creating multi-column text

In the past, if we wanted to create multiple column text on our web pages, we've had to use some fairly clunky workarounds. CSS3 contains the multicolumn layout module that makes it easy to create multiple columns and give you several options for controlling the columns themselves. Currently support for multiple columns is not as good as some of the other features we have covered in this chapter and we are forced to deal with several vendor prefixes in order to get this technique to work. We'll go ahead and discuss support and the differences between browsers as we create multicolumn text for our legal page.
Expand all | Collapse all
  1. 3m 5s
    1. Welcome
      1m 20s
    2. Using the exercise files
      1m 45s
  2. 31m 30s
    1. What is CSS3?
      5m 26s
    2. The current status of CSS3
      3m 35s
    3. An overview of CSS3 capabilities
      2m 24s
    4. Can you use CSS3 now?
      5m 31s
    5. Detecting support for CSS3
      9m 0s
    6. Understanding vendor prefixes
      5m 34s
  3. 1h 9m
    1. An overview of child and sibling selectors
      3m 11s
    2. Using child and sibling selectors
      7m 17s
    3. An overview of attribute selectors
      3m 19s
    4. Using attribute selectors
      8m 32s
    5. Pseudo-class UI selectors
      5m 56s
    6. Negation pseudo-class selectors
      6m 48s
    7. Target pseudo-class selectors
      5m 39s
    8. Structural selectors
      3m 58s
    9. Nth-child selector syntax
      10m 0s
    10. First, last, and only structural selectors
      5m 39s
    11. Using structural selectors to write more efficient code
      8m 52s
  4. 45m 28s
    1. Color formats in CSS3
      7m 9s
    2. Transparency in CSS3
      9m 10s
    3. CSS3 gradients
      4m 11s
    4. Creating linear gradients
      13m 57s
    5. Creating radial gradients
      11m 1s
  5. 49m 8s
    1. Working with web fonts
      6m 38s
    2. @font-face syntax
      4m 52s
    3. Downloading sample fonts
      6m 5s
    4. Writing @font-face declarations
      7m 57s
    5. Using web fonts
      6m 42s
    6. Using text shadows
      7m 14s
    7. Creating multi-column text
      9m 40s
  6. 50m 55s
    1. An overview of the flexible box model
      4m 42s
    2. Controlling box orientation
      5m 2s
    3. Setting element flexibility
      12m 59s
    4. Distributing boxes
      7m 54s
    5. Controlling box alignment
      12m 38s
    6. Working with box-sizing
      7m 40s
  7. 1h 5m
    1. Using border-radius
      6m 20s
    2. Creating custom rounded corners
      10m 21s
    3. Understanding border images
      5m 15s
    4. Using border images
      8m 52s
    5. Creating box shadows
      8m 58s
    6. CSS3 backgrounds
      4m 55s
    7. Controlling background size
      8m 46s
    8. Creating multiple background images
      6m 4s
    9. Using background-origin
      3m 18s
    10. Clipping background content
      3m 2s
  8. 40m 8s
    1. An overview of CSS3 2D transforms
      4m 26s
    2. Using 2D transforms
      8m 16s
    3. Setting transform origins
      5m 24s
    4. An overview of CSS3 transitions
      5m 0s
    5. Animating CSS properties
      6m 12s
    6. Using easing in animations
      5m 41s
    7. An overview of 3D transforms
      5m 9s
  9. 37m 56s
    1. Understanding media queries
      6m 18s
    2. Strategies for targeting multiple devices
      6m 4s
    3. Writing styles for target screen sizes
      12m 11s
    4. Deploying styles through media queries
      3m 55s
    5. Basing media queries on page orientation
      2m 24s
    6. Targeting media queries for iOS devices
      7m 4s
  10. 1m 6s
    1. Goodbye
      1m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS3 First Look
6h 34m Appropriate for all Nov 29, 2010

Viewers: in countries Watching now:

In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.

Topics include:
  • Understanding the history of CSS3
  • Working with the new selectors
  • Adding transparency and gradients
  • Specifying web fonts with @font-face
  • Understanding the advances to page layout
  • Looking at CSS3 box model capabilities
  • Using 2D and 3D transforms
  • Understanding media queries
Subject:
Web
Software:
CSS
Author:
James Williamson

Creating multi-column text

In the past, if we wanted to create multiple column text on our web pages, we've had to use some fairly clunky workarounds. CSS3 contains the multicolumn layout module that makes it easy to create multiple columns and give you several options for controlling the columns themselves. Currently support for multiple columns is not as good as some of the other features we have covered in this chapter and we are forced to deal with several vendor prefixes in order to get this technique to work. We'll go ahead and discuss support and the differences between browsers as we create multicolumn text for our legal page.

So here I have the legal.htm file open from the 04_07 resources directory. We'll also be using the main.css in the _CSS file, so if you're not using Dreamweaver or some other text editor, you want to go ahead and open that up as well. Okay, so what's going on here? Well, let me go ahead and preview this in Chrome and you can see that after every section we have this disclaimer with really long text, limit of liability was really long text, so forth and so on. This text is almost impossible to read. It's almost like it was in Latin or something.

So it would be really nice if this was in multiple columns. It might make it a little easier to read and maybe reducing the text size would be a little bit of a good idea here as well. So what I am going to do, first off, is determine where I want my columns. Now I could go ahead and make all individual paragraphs two columns, but that would be weird. That's kind of hard to read. I need the groups of paragraphs to be columns. I am going to surround them in div tags and use the div tag in order to help us. So here is what are going to do. I am going to go down in my code in the legal page to around line 27.

You can see here on line 28, we have our first heading three, which is a disclaimer. I am going to grab all of the other paragraph text inside this. Select all the way through say line 32, where we have our last paragraph before limit of liability, and then I am just going to wrap that in a div tag. So just no classes, no IDs, just go ahead and wrap that in a div tag. I need to do that for each section, so same for limit of liability. Now you will notice that the heading is not part of the div tag. We do not want our headings to be part of the two column text.

We want that to be single column. So again, I am going to wrap the section below it in a div tag and finally refund policy, I am going to go ahead and wrap all of that, all those paragraphs in a div tag as well. So it's going to wrap all of the paragraphs in div tags. Essentially the div tag is allowing us to sort of group this content together and it's going to make it a lot easier for us to make it multiple columns. I'll save this file and I am going to switchover to my main.css, and I am going to scroll down through my CSS to about line 402, so about line 402.

Now, I have a little comment about there, say on line 403 I guess, and it says multicolumn text rule goes here. Fair enough, and that's where I am going to put it. So the first thing I am going to do is just write a rule that targets all this div tags. I am going to type in #mainContent h3 + div. Now so we are using a sibling selector here that basically says, "Hey, whenever you find a div tag, it comes directly after an h3 tag, which is inside the mainContent, go ahead and do this." So again, we don't have to use classes.

We don't have to use IDs. We can use our structural selectors to help us out. All right, so inside this I am going to go ahead and create multiple columns. I do that through the use of a couple of different vendor prefixes. I will go ahead and do Mozilla's first. moz. Just because we've been doing WebKit first, and I don't want Mozilla to feel left out, and the actual property name is column-count, column counts. We are going to do two columns and we'll do the same thing for WebKit. So, webkit-column-count.

Again, we are going to do two columns. So it's kind of nice. You can specify exactly how many columns you want. Now we'll go ahead and provide the non- prefixed code, just in case WebKit or Firefox drops the need for the prefix, we'll have that code there and eventually we can get rid of the prefixes. We are also going to do a text-align: justify. Since they are going to be in two columns, we'll make them really tight by justifying it, and we'll take the font-size down a little bit to 85% inside this div tag. So I am going to go ahead and save that and test this in a couple of browsers.

I will start by testing it in Chrome. Cool! There is our two column text, very lovely. Let's test that in Firefox to make sure it's working there as well. It is. Awesome. Now, maybe not as readable as we would like. To be sure we would like a little bit more of a gutter between them there. That would be nice. Other than that though, it's starting to look pretty nice, and I would also like to have a little bit more control over the width of the column. Well, we do have control over the width of the column, but it's probably not the level of control that you are going to want. Let me show you what I mean.

Let's go back into our selector here and directly underneath the column-count I am going to type in -moz-column-width. So we do have a property called column-width. Let me go ahead and set that initially to 300 pixels. Do the same thing for WebKit. So webKit-column-width, 300 pixels. Okay, cool. If you don't specify the width of the column, obviously what it's going to do is it's going to take a look at the available space and split them up evenly. Now I would love to tell you that this is going to give you the capability to do unbalanced columns, but it's not.

Let me show you what it does. So if I preview this in Chrome, you can see I am back to having a single column worth of text. What's up with that? The same thing for Fire. Let's try that... No. So instead of basically allocating 300 pixels for the first column and then whatever is left over, the second column gets that. Both browsers are looking at it, saying, "You know what? I do not have enough space to fit 200-300 pixel columns." So what you get is one column. Well, okay. So what if you go down in value? Let's check that out. Maybe I am going to go down to 200 pixels in both of them. Save that and test it.

Oh! So now again, instead of making a small first column and letting the second one sort of stretch, what you get is you get two exactly 200 pixel column. So unfortunately, that one value is not going to give you unbalanced columns. So for what we are doing, we really don't need those column-widths. I am just going to go ahead and get rid of those guys. I would like our column gap should be a little bit wider, maybe a little bit easier to read, and that is something that I do have control over. So in the space where my column-widths used to be, I am going to add Mozilla. moz-column-gap.

I am going to go ahead and set the initial value to 30 pixels. I'll do the same thing for WebKit. webkit-column-gap: 30 pixels. Right, if I save this and preview this in my browser, you can see that I have a much wider gap now. It is exactly 30 pixels. You don't have to stick with pixels. You can use relative units of measurement. As a matter of fact I am going to go back and do about 2 ems worth of column-gap. The 2 ems is typically going to work out to our 32 pixels, because the average browser size is 16 pixels, in terms of its text.

So if I preview, that's about the same, maybe a couple of pixels bigger, but that certainly is a a little bit easier to read for us. Now another thing that I want to point out, we have one more feature that we can use for our columns and that is a column rule. Column rules are basically lines that get added inside the gutter and in certain cases they can aid readability of the text. They are not always going to be what you need, but you should at least know how to do them. So in case you need one later on for your project, you know how to them. Okay, so we'll do them in Mozilla first. So -moz-column-rule-style.

Now here we are just going to do solid. After that we are going to do moz-column-rule-color. Color I am going to use is #999. So it's just sort of a gray color and then -moz-column-rule-width. So it's just like specifying a border and here we are just going to do 1 pixel. All right, since I don't feel like typing all that again, I am going to copy it, paste it, and change the moz to webkit, because I am smart like that.

If you enjoy typing, feel free to do that yourself. So I am going to save this, preview it in Chrome, and you can see that we have a cool little rule for all of our columns. And one of the things that's helpful for these is in these longer columns, they help you know where the column is ending. This hasn't ended it. So I just keep going down until I sort of find that end. So, they can be decorative or they can also be functional as well, and it is up to you as to whether you want to try them. Now if I go into Firefox and view that, notice that it displays a rule almost the same way.

Now Firefox didn't used to support that rule. WebKit has been supporting it a lot longer than Firefox. So older versions of Firefox, you may not see that rule if you try the same syntax. While the current capabilities of multiple column text might not be exactly where you'd like it, like me you might want a little bit more control over it, it still gives us another really powerful tool in controlling the typography within our sites. The lack of support in Opera and Internet Explorer, because neither of them supports multiple columns, makes it more of an enhancement capability rather than a layout tool, and you should always keep text readability in mind when considering its use. Multiple column text, for example, spanning the entire page, not a good idea.

The thing that I'm most looking forward to is having the ability to create multiple columns when I need them without having to add a lot of extra markup or complicated styling hack. So as support for this increases, I'll probably be using it a lot more in my own projects.

Find answers to the most frequently asked questions about CSS3 First Look.


Expand all | Collapse all
Please wait...
Q: I'm following along with the video "Transparency in CSS3".  James shows us how to achieve transparency in Internet Explorer by going to Kimili.com and entering a HSLA value to generate code for transparency.

Here that code:

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B); /* IE6 & 7 */ zoom: 1;

When this code is added to my HTML file it removes transparency on browsers that do in fact support it. So I'm left with NO transparency. Why?
A: The problem is in the filter code. If the IE background is called last, the first "transparent" declaration will remove all previous colors, regardless of browser. To resolve this, place the rule inside a conditional comment for IE or remove the "transparent" declaration at the front of the rule.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS3 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

CSS3 First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked