karenak Crown

Here's the Categorian Beginner's First Aid Kit - Part Eight /b

Text Formatting - Columns

CSS offers a columns property which is quite handy and allows us to ditch the tables which are so unwieldy.

However please note that so far Opera is the only browser that fully supports columns. Firefox, Chrome and Safari use a workaround and (unsurprisingly) the Internet Explorer cannot handle it at all. See example below.

Columns are defined as a class in the Style Sheet. It is really quite simple.

Add it to your Style Sheet

Click "Style" and add a new line at the end.

Since columns are for text, we simply use the P tag.

The code:

p.column { column-count: 2; column-gap: 25px; column-rule: 1px solid black; column-width: 150px; }

column-count defines the number of columns. Usually 2 or max. 3 columns look best. But that's up to you.

column-gap defines the space between the columns. The value is in px. Just test and see what looks good.

column-rule allows you to set a dividing line into the gap between the columns. It is optional. The definition is the same as with borders. So '1px solid black' will show a thin black vertical line.

column-width is optional too. The default value is 'auto' which means that your browser will calculate it for you. However, there might be cases when you wish to specify the width of your text.

Theoretically this would be all. However, as mentioned above, we'll have to think of Firefox, Chrome and Safari users. For Firefox we'll add a '-moz-' and for Chrome and Safari a '-webkit-'. So in fact we'll have to type the code 3 times in all. Like this:

p.column {
column-count: 2; column-gap: 25px; column-rule: 1px solid black; column-width: 150px;
-moz-column-count: 2; -moz-column-gap: 25px; -moz-column-rule: 1px solid black; -moz-column-width: 150px;
-webkit-column-count: 2; -webkit-column-gap: 25px; -webkit-column-rule: 1px solid black; -webkit-column-width: 150px;

Not difficult, just a bit irksome.

Click "Save"

How to use it

In your blog post type

<p class="column">

...type your text ...
and end it with



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

As you can see, you can easily format the text as you would any other text. So I inserted the image and used text-align:justify.


<p class="column" style="text-align:justify;"><img style="float: left; margin-right: 10px;" src="...path to the image..." width=80px;/>
...here comes the text... </p>

That is all :-)

>>>> Part Nine