Good question. Zen's column layout is "full height" so you can't use drag-and-drop to position sections that way. However, it's pretty easy to do what you show here.
You'll have a one-column layout, with 1 & 4 being standard Zen sections. For 2 & 3, use the Section Designer to set their widths to smaller amounts, and float: left for section 2, and float: right for section 3. (Keep reducing the width values if they still stack vertically--they won't sit side-by-side if they're too wide, which includes padding and margins.)
I am also having issues with the layout. I am trying to achieve more columns than just two as below:
However, I am coming across the following issues:
Hope you guys can help with these.
1. The full width toggles will mess with this kind of carefully designed layout. To prevent the full width option for viewers, go into the Page Designer (under the toolbar's gear menu) and enter in a width for the canvas size (the default is 1120).
2. Just the full width settings (personal under the user menu in the toolbar) and the full width toggle (the arrows on the toolbar).
3. Often you have to tweak width and margin/padding settings of complex section layout to work with both IE and real browsers. If you're having trouble with this, please send screenshots and more details to email@example.com and we'd be happy to help sort it out.
More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...
Connect with like-minded Atlassian users at free events near you!Find a group
Connect with like-minded Atlassian users at free events near you!
Unfortunately there are no AUG chapters near you at the moment.Start an AUG
You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs