<< .. Go to : : Home : : Exercise 10 : : Demo 10A : : Demo 10B : : Demo 10C : : Demo 10D : : Demo 10E : : All Class Demos .. >>

Exercise 10 Demo: Part E : Using Columns

Text in Columns:

Those of us who come from a print background are used to setting text up to flow in columns. HTML 5 and CSS3 allow that to happen. As I add text, the columns reflow. Here is an example of what text in a column would look like:

My Animals

Right now I have 2 dogs, 2 cats and one very large tortoise. They are all females for some reason. The dogs are Stella and Darbie. The cats are Sophie and Lily. And the tortoise is Mrs. Fuggles.

Stella is mostly a white colored dog. She has a scattering of black and grey dots because she is part dalmatian. She is a very smart dog.

Darbie is almost all black with a few patches of white, smaller than Stella and now that we have had her for a while she is getting cuter all the time. We took her in when her owner had to move far away. She and Stella love to hang out in the office with us under our desks.

Sophie is a large, fat black and white cat. She stays upstairs most of the time and likes to boss everyone around in the house.

Lily is Sophies sister, but they don't look alike at all. She is sleek and slim and almost all grey except for a white mustache and white footies. She loves to go outside and be adventurous. The two of them like to curl up together on my bed to hnap during the day.

Mrs. Fuggles is a large tortoise. An african spurred tortoise actually. We got her quite by accident. She is really interesting. I think she weighs about 40 pounds. She is 6 years old. We have had her for over a year now. She will get up to over 100 pounds and live to be more than 100 too. Wow!

The Code for this is:

<style type="text/css">

.coltext {width: 730px; -moz-transform:scale(1); column-count: 3; column-gap: 1.5em; column-rule: 1px solid #2e429a;
-webkit-column-count: 3; -webkit-column-gap: 1.5em; -webkit-column-rule: 1px solid #2e429a;
-moz-column-count: 3; -moz-column-gap: 1.5em; -moz-column-rule: 1px solid #2e429a;
font-size:12px; margin: 10px 0;}
p:first-child {margin-top: 0;} /* this means the first paragraph won't drop down in the column */


There are three seemingly repeats of information. These are formatted for some of the individual browsers. Columns do not work on all browsers, but they improve readability. They list the number of columns, the gap between them and this one has a vertical rule between the columns. I used a class for the styling so I can use it multiple times per page.

© Claudia Faulk. Created in 2012. Updated 1.15