Splitting a layout column horizontally?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi everyone,

I currently have a two-column layout on the homepage of my test site (http://loremipsumgames.yolasite.com/). In the Site Builder, I'd like to split the right-hand column into 3 horizontal columns - thus making the layout pattern something like an "E" shape, or the "three-over-one" layout rotated 90 degrees clockwise.

Is this possible with widgets or HTML? I thought the Column Divider widget would have a property to make the divide horizontal, but it doesn't...

Thanks in advance,
Brendan
Photo of Brendan Quinlivan

Brendan Quinlivan

  • 10 Posts
  • 0 Reply Likes
  • undecided

Posted 8 years ago

  • 1
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi Brendan,

I think the best way to do this would be to use a few Column Divider Widgets, I'm not sure if this is what you're looking for:


You can add more Column Divider Widgets within the original Column Divider Widget.

I hope that helps!
Photo of Brendan Quinlivan

Brendan Quinlivan

  • 10 Posts
  • 0 Reply Likes
Hi Marije,

Thank you for your response! I didn't know you could nest column dividers, so that's something really handy to know!

I don't think my explanation made it very clear what I was asking - I apologise for this. I think, in hindsight, a diagram would have made my question much clearer.

The diagram below depicts the current layout (in black), and my desired result (in deep red):


Thus, can I split the right-hand column horizontally into 3 rows?

Many thanks,
Brendan
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
Brendan, I think you'd be better off using the one column layout.

Change Layout/1 Column

Drag a 2 Column Divider widget over.

Drag an html widget into your Left Column.
Use this code:
Before your content, use this code: <!-- <div style="width:400px; height:600px;">-->
After your content: <!--</div>-->

Drag three html widgets into your Right Column
Use this code in each widget:
Before your content, use this code: <!-- <div style="width:400px; height:200px;">-->
After your content: <!--</div>-->

It may look like it doesn't line up, like you want in the sitebuilder, but if you Preview, it looks good.

Note the 400 px width works for a 900 width header, considering margins. Change the width and height numbers to suit your needs.

ps it's not as hard as it looks.

Hope that helps.
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
Don't use the < ! -- or --> part of the code. that's only needed here in the forum to display the actual code.

This is what the Preview looks like:
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello Brendan,

Thank you for your message, and thank you Jean for the fantastic suggestion! If you would like to stick with the two column layout, you can get this desired result simply by dragging your three desired widgets into your right hand column. Keep in mind you can click on the properties tab on each widget to adjust margins. Here is an example of this result. I used a text widget, a picture widget and a Flickr widget on my test site:



I hope these suggestions are helpful. Please let us know if you need further assistance.

Cheers!
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
Good idea, Brianna. A 2 column layout would work fine. I'm not sure why I added that extra step.

Actually, I do know why. I like to use a footer on my pages, which requires a one column layout.
Photo of Brendan Quinlivan

Brendan Quinlivan

  • 10 Posts
  • 0 Reply Likes
Hi Brianna, Jean S,

Thank you both so much for your really helpful feedback! :)

I intended to put several different widgets (an image and 2 text boxes) into each of the 3 rows, and my first attempt at achieving this used your method, Brianna. I think the nested widgets proved to be my undoing, and I thus posed my question here.

I think Jean S's suggestion will give me the outcome I'm looking for, especially since I also have a footer on my homepage.

Thank you both again for your time and feedback - I'll update you as to how my changes turn out!

Kind regards,
Brendan