Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Content expand to the second column

Go to End

3 Posts   1195 Views


Community Member, 18 Posts

4 June 2011 at 11:32am

Hi guys,

I have a long list in the main Content. And I want two fixed height columns. If the the content reaches the end of left column, then automatically continue the rest of the content in the right column. The difficulties is that I don't want to field for content input since the user won't know when the content reach the height of the left column....

I have no idea how to do, shouldn't be hard, right?

Thanks for any help!


Community Member, 10 Posts

7 June 2011 at 4:39am

Hi, I'm not completely sure what you are describing, but my interpretation of it is that you have a user editable list that is output into the "Content" column, and you want that to be split into two even(ish) columns?

If what I've described is correct, I'd just render the entire list and then float the list items via CSS

So for example if your page goes:

<div id="Content">

<ul id="The_List">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>


You could go:

#The_List li {
width: 49%;
float: left;

I may have totally missed the point, but hope that's of some use if not.


Community Member, 38 Posts

7 June 2011 at 9:51pm

CSS3 has multi-column support, but a lot of browsers do not. Depending on your audience, this might be a solution.

For legacy browser support I use jQuery plugins like Columnizer (

Good luck!