Skip Navigation
Web Services
Member, Texas Tech University System The Princeton Review - 373 Best Colleges, 2011 Edition

Columns

While the content area of the ASU webpage template contains only 1 wide column, it is possible to divide that space up into multiple columns. This can be useful for a variety of reasons such as making better use of the horizontal space for certain types of content or creating a specific layout. Keep in mind a few things when working with columns:

  • Use them sparingly, and only when they enhance the content
  • Columns are typically used in print publications, but less often in web applications. Consider the end-users expectations and the readability of the content before using columns.
  • Don’t go overboard. A little can go a long way.

To create columns, start by adding a <div> with a class of "columns" (plural). Within this <div>, you will be adding additional <div>s with a class of "column" (singular) to which you will add your content. The number of additional <div>s will depend on the number of columns you need.

<div class="columns">
        <div class="column"><p>Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.</p></div>
        <div class="column"><p>A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.</p></div>
</div>

Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.

A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.

Notice that this markup alone does not create columns. Additional classes need to be added in order to size the columns:

2 Equal-Width Columns

To create two columns of equal width, start with the basic setup above, and add an additional class of "half" to each column <div>. Multiple classes can be combined on an element by separating them with a space.

<div class="columns">
        <div class="column half"><p>Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.</p></div>
        <div class="column half"><p>A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.</p></div>
</div>

Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.

A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.

3 Equal-Width Columns

To create three columns, start with the same basic premise above, and add an additional column <div>. Replace the class of "half" with "third" on all three <div>s.

<div class="columns">
        <div class="column third"><p>Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.</p></div>
        <div class="column third"><p>A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.</p></div>
        <div class="column third"><p>Roscoe made his first appearance in 1970 when Wiley Burrus put on a fur-and-felt ram�s head constructed around a motorcycle helmet and appeared as Roscoe Ram I. Burrus would serve two years as Roscoe before passing the crown, err head, on to C.A. Cockrell in 1972.</p></div>
</div>

Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.

A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.

Roscoe made his first appearance in 1970 when Wiley Burrus put on a fur-and-felt ram�s head constructed around a motorcycle helmet and appeared as Roscoe Ram I. Burrus would serve two years as Roscoe before passing the crown, err head, on to C.A. Cockrell in 1972.

4 Equal-Width Columns

To create four columns, continue the same process, adding an additional column <div> and using a class of "fourth" on each <div>.

<div class="columns">
        <div class="column fourth"><p>Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.</p></div>
        <div class="column fourth"><p>A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.</p></div>
        <div class="column fourth"><p>Roscoe made his first appearance in 1970 when Wiley Burrus put on a fur-and-felt ram�s head constructed around a motorcycle helmet and appeared as Roscoe Ram I. Burrus would serve two years as Roscoe before passing the crown, err head, on to C.A. Cockrell in 1972.</p></div>
        <div class="column fourth"><p>Though their names are known to posterity, the identity of subsequent Roscoes has been kept secret by his Pike brothers. After all, a celebrity of his magnitude needs a little privacy now and then.</p></div>
</div>

Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.

A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.

Roscoe made his first appearance in 1970 when Wiley Burrus put on a fur-and-felt ram�s head constructed around a motorcycle helmet and appeared as Roscoe Ram I. Burrus would serve two years as Roscoe before passing the crown, err head, on to C.A. Cockrell in 1972.

Though their names are known to posterity, the identity of subsequent Roscoes has been kept secret by his Pike brothers. After all, a celebrity of his magnitude needs a little privacy now and then.

Unequal-Width Columns

You can create multiple columns of unequal width by combining column <div>s with different width classes. You can mix and match widths as long as the total width adds up to 100% (or less). The available classes are:

  • fourth - the column will fill 1/4 of the available space
  • third - the column will fill 1/3 of the available space
  • forty - the column will fill 40% of the available space
  • half - the column will fill 50% of the available space
  • sixty - the column will fill 60% of the available space
  • twothirds - the column will fill 2/3 of the available space
  • seventyfive - the column will fill 75% of the available space

In the following example, two columns are created - one that fills 2/3 of the width and one that fills the remaining 1/3.

<div class="columns">
        <div class="column twothirds">
                <p>Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.</p>
                <p>A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.</p>
        </div>
        <div class="column third"><p>Roscoe made his first appearance in 1970 when Wiley Burrus put on a fur-and-felt ram´s head constructed around a motorcycle helmet and appeared as Roscoe Ram I. Burrus would serve two years as Roscoe before passing the crown, err head, on to C.A. Cockrell in 1972.</p></div>
</div>

Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.

A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.

Roscoe made his first appearance in 1970 when Wiley Burrus put on a fur-and-felt ram�s head constructed around a motorcycle helmet and appeared as Roscoe Ram I. Burrus would serve two years as Roscoe before passing the crown, err head, on to C.A. Cockrell in 1972.

In this example, three columns are created - the side columns each filling 1/4 of the width and the center column filling the remaining half.

<div class="columns">
        <div class="column fourth"><p>Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.</p></div>
        <div class="column half">
                <p>A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.</p>
                <p>Roscoe made his first appearance in 1970 when Wiley Burrus put on a fur-and-felt ram´s head constructed around a motorcycle helmet and appeared as Roscoe Ram I. Burrus would serve two years as Roscoe before passing the crown, err head, on to C.A. Cockrell in 1972.</p>
        </div>
        <div class="column fourth"><p>Though their names are known to posterity, the identity of subsequent Roscoes has been kept secret by his Pike brothers. After all, a celebrity of his magnitude needs a little privacy now and then.</p></div>
</div>

Roscoe is the crown - some might say clown - prince of Angelo State University. Seen at most athletic events and many community activities, Roscoe lets his actions do his talking, whether it is leading cheers, handing out candy to children or greeting freshmen when they arrive on campus.

A perpetual junior with a major in animal science and a minor in communications, Roscoe D. Ram is the son of Buck and Ewenice Ram of San Angelo. He is the only campus persona seen to wear his letter sweater everywhere. In his spare time, he hangs out with the brothers of Pi Kappa Alpha.

Roscoe made his first appearance in 1970 when Wiley Burrus put on a fur-and-felt ram�s head constructed around a motorcycle helmet and appeared as Roscoe Ram I. Burrus would serve two years as Roscoe before passing the crown, err head, on to C.A. Cockrell in 1972.

Though their names are known to posterity, the identity of subsequent Roscoes has been kept secret by his Pike brothers. After all, a celebrity of his magnitude needs a little privacy now and then.