nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Side-by-side columns

Bryan Imrie

I would like to have two panels display side-by-side within a column, both at 50% width of the width of the overall column. I cannot figure how to make this happen, and am looking for help! Advice is appreciated!

My current code looks like this:

{section}
{column:width=70%}
{panel:title=Latest News|borderStyle=solid|borderColor=#617833|titleBGColor=#00B7EB|bgColor=#FFFDD0}
{blog-posts:5|content=titles|bgColor=#ACE1AF}
{panel}

{panel:title=Getting Help|borderStyle=solid|borderColor=#817350|titleBGColor=#42BFD7|bgColor=#C0E9F1}
Need help? The following places are good spots to check:
* [Link]
* [Link]
* [Link]
* [Link]
{panel}

{panel:title=Getting Started|borderStyle=solid|borderColor=#6e8cae|titleBGColor=#42BFD7|bgColor=#C0E9F1}
[Link]
[Link]
{panel}

{panel:title=Helping us work|borderStyle=solid|borderColor=#6e8cae|titleBGColor=#42BFD7|bgColor=#C0E9F1}
* [Link]
* [Link]
* [Link]
{panel}
{column}

{column:width=30%}
{panel:title=Page Navigation|borderStyle=solid|borderColor=#617833|titleBGColor=#00B7EB|bgColor=#FFFDD0}
{pagetreesearch}
{pagetree}
{column}
{section}

If you put this into a page, then you can see that I currently have my left-hand column effectively set into four "rows" but I would like three "rows" with the middle "row" being the two panels, Getting Started and Getting Help. I need to maintain the fact that my Page Navigation is its own column running down the entire length of the right-hand side of hte page.

Thanks!

Accepted answers

Bryan Imrie

It seems like this can't really be done in 3.5.

All comments

David at David Simpson Apps

Try nesting some more sections/columns e.g.

{section}
	{column:width=70%}	
		{panel:title=Latest News|borderStyle=solid|borderColor=#617833|titleBGColor=#00B7EB|bgColor=#FFFDD0}
			{blog-posts:5|content=titles|bgColor=#ACE1AF}
		{panel}		
		{section}
			{column:width=50%}
				{panel:title=Getting Help|borderStyle=solid|borderColor=#817350|titleBGColor=#42BFD7|bgColor=#C0E9F1}
					Need help? The following places are good spots to check:
					* [Link]
					* [Link]
					* [Link]
					* [Link]
				{panel}
			{column}
			{column:width=50%}
				{panel:title=Getting Started|borderStyle=solid|borderColor=#6e8cae|titleBGColor=#42BFD7|bgColor=#C0E9F1}
					[Link]
					[Link]
				{panel}
			{column}
		{section}
		{panel:title=Helping us work|borderStyle=solid|borderColor=#6e8cae|titleBGColor=#42BFD7|bgColor=#C0E9F1}
			* [Link]
			* [Link]
			* [Link]
		{panel}		
	{column}
	{column:width=30%}	
		{panel:title=Page Navigation|borderStyle=solid|borderColor=#617833|titleBGColor=#00B7EB|bgColor=#FFFDD0}
		{pagetreesearch}
		{pagetree}		
	{column}
{section}

This is easily achieved in Confluence 4.x, but may not work in earlier versions.

The new layout styles are also a big help and should eradicate some of this nested section nonsense

Bryan Imrie

Thanks for this David. I've tried multiple sections/columns as well, but it actually takes me in the wrong direction and leaves me with effectively one column for all my panels. It seems to me that the engine doesn't render {sections} side-by-side. We're using 3.5 at the moment, so maybe I'll have to wait for an upgrade before I can get this to look the way I want. But any other suggestions would be great!

Bryan Imrie

It seems like this can't really be done in 3.5.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence