Question : Basic 3 column layout

[gazmob]

Hello,

I seem to be struggling to get a 3 column layout working where the main Piranha content would be the centre content. What my plan is is to have a fixed left hand side sidebar
/* The left side bar /
.leftside {
height: 100%;
width: 160px; / the width of the left sidebar /
position: fixed; / Fixed Sidebar (stay in place on scroll) /
z-index: 1; / Stay on top /
top: 0; / Stay at the top /
left: 0;
background-color: #111; / Black /
overflow-x: hidden; / Disable horizontal scroll */
padding-top: 20px;
}
And the right hand side sidebar having a Twitter time line eg
Tweets by tidyui <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>.

I can’t see to get it to work. The Piranha content always seems to end up too wide and enforcing each of the sidebars and content to be sequential rather than 3 columns. Do you have a simple example?

Thanks

[gazmob]

Sorry the Twitter timeline was like <a class="twitter-timeline" href="https://twitter.com/tidyui?ref_src=twsrc%5Etfw">Tweets by tidyui</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[tidyui]

This really has nothing to do with Piranha, what HTML markup you use in your application is totally up to you and beyond our control, however here are some general css guidelines.

Elements positioned with fixed or absolut does not affect the position of other elements in the page, think of it as adding another layer in a graphic software like PS or Gimp.

If you position your sidebars with fixed they won’t affect the position or size of the main content area. There’s several fixes to this, one would be to add a margin to the main container so that it’s stays clear of the sidebar, for starters “margin-left: 160px”.

Like I mentioned this is not anything we give support on as it’s out of our control, but there’s plenty of forums out there focused on front-end web development.

Best regards

[GangsterGeek89]

Hi @gazmob like @tidyui said its a html problem you are having. I have done a quick example in codepen for you hopefully will help you out See Here

[r4g-jon]

Hi @gazmob

Just to add, if you are looking to create a 3 column layout then Bootstrap will almost certainly be your best bet. I don't have an example to hand, but look at https://www.getbootstrap.com. You should be able to take something from the Examples page (https://getbootstrap.com/docs/5.0/examples/) and do what you want quite quickly.

Hope this helps!

[gazmob]

Thanks all for your feedback. I have in the last couple of hours managed to get something pretty close to what I am after and am now just retrofitting in to Piranha.

I should have mentioned in the original question that I was using the provided Razor template but now that I am just about there then it should not be too much to do a bootstrap version, I am not totally unfamiliar with this. This is also my first site using VSCode and trying to understand the gulp tasks etc so that is adding a little bit to the learning curve.

As an aside whilst I have always understood the concept of a headless CMS for the presentation aspect Piranha really does make it pretty accessible. Good job.

Thanks again. I may be back shortly with more questions :-)