Two columns with different widths?

Kirby 2 Solved ✅
1

When using the columns plugin to create a two column layout on a page, can I define different widths of the individual columns that are not a 50/50 split of the page? For example I’d like to have a left column that uses 25% of the page and a right column that uses 75% of the page. Is that possible?

Kurt

2

You can do that in your stylesheet.

3

Thanks texnixe. It is good to know that this can be done. I know this is more of a CSS question but keeping in mind that I am using the exact CSS that the plugin ships with, what do I need to change to make one column fill 25% and the other 75% for the 2-column layout.

Kurt

4 
.columns-2 .column:first-child {
  width: 25%;
}
.columns-2 .column:last-child {
  width: 75%;
}

Note that this will affect all two column layouts. If you need more flexibility, you would have to adapt the plugin, or do the columns differently, e.g. using the builder plugin.

5

That worked perfectly. Thanks so much for the extra CSS support.

Am I crazy to be using this as a quick and dirty way to insert a sidebar into a page?

Kurt

6

Well, I would save the content for the sidebar in the content file, but do the layout in the template.