# How do you create multi-column layout options with a fixed sidebar and fluid content?

**URL:** <https://community.sitejet.io/t/how-do-you-create-multi-column-layout-options-with-a-fixed-sidebar-and-fluid-content/2781>\
**Category:** How-to\
**Tags:** cms\_presets\
**Created:** [December 12, 2023, 11:53pm UTC](https://community.sitejet.io/t/how-do-you-create-multi-column-layout-options-with-a-fixed-sidebar-and-fluid-content/2781 "2023-12-12T23:53:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![101\_North\_Digital](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/101_north_digital/32/212_2.png) [@101\_North\_Digital](https://community.sitejet.io/u/101_North_Digital)\
**Post date:** [December 12, 2023, 11:53pm UTC](https://community.sitejet.io/t/how-do-you-create-multi-column-layout-options-with-a-fixed-sidebar-and-fluid-content/2781/1 "2023-12-12T23:53:18Z")

</div>

Thank you for taking the time to invest in this question. I am looking into more dynamic driven content for clients and I have several requests for directory, category and other content widgets. These widgets can be static or fixed to the top of a column or they can be fluid and continously move down the side of the page as you scroll.

I am wondering how to build out a page/site template with a multi-column layout which has fixed or fluid- or even based on scroll depth - sidebars.

Here is a basic static example - [ThemeZee Demo - Smartcube](https://preview.themezee.com/?demo=smartcube)  
Here is a basic fixed example - [Free WordPress Themes – Anders Norén](https://andersnoren.se/teman/)

FOOD FOR THOUGHT  
I could just build in a multi column flexbox with some CSS etc. But I am wondering if anyone else has built something like this and they could explain any pit falls.

PS - This also seems like something Sitejet should build out as I have a gut feeling I cannot be the only web dev that needs something like this for my clients.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [December 14, 2023, 9:20am UTC](https://community.sitejet.io/t/how-do-you-create-multi-column-layout-options-with-a-fixed-sidebar-and-fluid-content/2781/2 "2023-12-14T09:20:17Z")

</div>

Hey Max,

Thanks for writing us. Funny you come up with that, because I also thought this is a very good feature that we should make easily accessible for Sitejetters. So actually, we pushed this through a while back and you can find a preset of this under Features → first preset:

 ![grafik](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/b/bcd29c0b6711a47476463bf1b7e980ee23a0b224.jpeg)

If you like to try building this yourself, you can mimic this quite easily:

- Use only one unequal column on the left side and fill it with all the content
- Use a container where you add all the content on the right side and make that one sticky.

![8930c5b9b8a0a7db7e41edb7780aed5e](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/b/bdc0330c0e74d2eae18a4022da4ca4192b94ceab.png)

The element should be sticky until there is new content in the area of that element. As an example: [https://codepen.io/enatario/pen/eKzxzY](https://codepen.io/enatario/pen/eKzxzY)

Let me know if that helps?