Blog columns

Want to divide your RapidWeaver blog in columns?
Use the css column-feature.

Let’s have a look at the CSS and HTML that creates the magic.

And here’s the css:

.blog-entry-body {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
width: 100% !important;
}

You can play around with the number of columns and the column gab.

The text in your columns will flow automatically from one column to the next - sometimes causing an unfortunate flow.
In this example I have used the section tag to be able to choose where I want to divide the columns

Here’s the CSS (add to RapidWeaver’s Custom CSS):

section {
-webkit-column-break-before:always;
-moz-column-break-before:always;
column-break-before:always;
}

Then I add the section-tag where I want the columns to split:

<section></section>

You can use several other html tags to do the trick… just find one you don’t use elsewhere on your page and one that doesn’t mess up your layout.

Add the css to RapidWeaver’s Custom CSS:
Page Inspector > Header > CSS (Custom CSS)



I have a - sometimes bad - habit of adding the !important to the css to make sure my custom css sisn’t overwritten by the theme. You probably don’t need it in this case.

DeFliGra · Stack’oholic | Mac’oholic | Web’oholic
https://defligra.weavers.space | Stacks for RapidWeaver

Tags: RapidWeaver Stacks is just like playing with Lego again. It's fun!