-
Hello Team,
I am trying to create a layout like this –
A Table of Contents on left, main content in middle and occasional notes in right sidebar.
I used outer/inner container and then grid and created 3 container layout and put position sticky with 100px top for left container. But it doesnt seem to be sticky. Haven’t yet tried to do right side.
What should be my approach to achieve this.
Thank you
-
Hi there,
The right side won’t be easy, I don’t think your structure would achieve it.
I would go with the structure like this:
- grid -- container A (sticky TOC 50%) -- container B (content + right sidebar 50%)Here’s a simple example, you can paste it to your site.
<!-- wp:generateblocks/element {"uniqueId":"c042374a","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"1fr 3fr"},"css":".gb-element-c042374a{display:grid;grid-template-columns:1fr 3fr}"} --> <div class="gb-element-c042374a"><!-- wp:generateblocks/element {"uniqueId":"c74b07b8","tagName":"div"} --> <div><!-- wp:generateblocks/text {"uniqueId":"a4ef800e","tagName":"p","styles":{"borderTopWidth":"1px","borderRightWidth":"1px","borderBottomWidth":"1px","borderLeftWidth":"1px","borderTopStyle":"solid","borderRightStyle":"solid","borderBottomStyle":"solid","borderLeftStyle":"solid","position":"sticky","top":"0px"},"css":".gb-text-a4ef800e{border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;position:sticky;top:0px}"} --> <p class="gb-text gb-text-a4ef800e">TOC</p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --> <!-- wp:generateblocks/element {"uniqueId":"0f6dad72","tagName":"div","styles":{"borderTopWidth":"1px","borderRightWidth":"1px","borderBottomWidth":"1px","borderLeftWidth":"1px","borderTopStyle":"solid","borderRightStyle":"solid","borderBottomStyle":"solid","borderLeftStyle":"solid"},"css":".gb-element-0f6dad72{border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px}"} --> <div class="gb-element-0f6dad72"><!-- wp:generateblocks/element {"uniqueId":"70365200","tagName":"div","styles":{"width":"75%","borderTopWidth":"1px","borderRightWidth":"1px","borderBottomWidth":"1px","borderLeftWidth":"1px","borderTopStyle":"solid","borderRightStyle":"solid","borderBottomStyle":"solid","borderLeftStyle":"solid","borderTopColor":"var(\u002d\u002daccent)","borderRightColor":"var(\u002d\u002daccent)","borderBottomColor":"var(\u002d\u002daccent)","borderLeftColor":"var(\u002d\u002daccent)"},"css":".gb-element-70365200{width:75%;border:1px solid var(\u002d\u002daccent)}"} --> <div class="gb-element-70365200"><!-- wp:generateblocks/text {"uniqueId":"820c0924","tagName":"p"} --> <p class="gb-text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> <!-- /wp:generateblocks/text --> <!-- wp:generateblocks/text {"uniqueId":"d3ca28a7","tagName":"p"} --> <p class="gb-text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> <!-- /wp:generateblocks/text --> <!-- wp:generateblocks/text {"uniqueId":"0869e472","tagName":"p"} --> <p class="gb-text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --> <!-- wp:generateblocks/element {"uniqueId":"a0df8cf0","tagName":"div","styles":{"borderTopWidth":"1px","borderRightWidth":"1px","borderBottomWidth":"1px","borderLeftWidth":"1px","borderTopStyle":"solid","borderRightStyle":"solid","borderBottomStyle":"solid","borderLeftStyle":"solid","borderTopColor":"#b41a1a","borderRightColor":"#b41a1a","borderBottomColor":"#b41a1a","borderLeftColor":"#b41a1a","display":"grid","gridTemplateColumns":"3fr 1fr"},"css":".gb-element-a0df8cf0{display:grid;grid-template-columns:3fr 1fr;border:1px solid #b41a1a}"} --> <div class="gb-element-a0df8cf0"><!-- wp:generateblocks/element {"uniqueId":"7ce93ed1","tagName":"div"} --> <div><!-- wp:generateblocks/text {"uniqueId":"48e59dc3","tagName":"p","styles":{}} --> <p class="gb-text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> <!-- /wp:generateblocks/text --> <!-- wp:generateblocks/text {"uniqueId":"1ba411d6","tagName":"p","styles":{}} --> <p class="gb-text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> <!-- /wp:generateblocks/text --> <!-- wp:generateblocks/text {"uniqueId":"9d66441b","tagName":"p","styles":{}} --> <p class="gb-text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> <!-- /wp:generateblocks/text --> <!-- wp:generateblocks/text {"uniqueId":"f1819991","tagName":"p","styles":{}} --> <p class="gb-text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --> <!-- wp:generateblocks/element {"uniqueId":"2ce9a2e6","tagName":"div"} --> <div><!-- wp:generateblocks/text {"uniqueId":"fd309ca0","tagName":"p"} --> <p class="gb-text">NOTE NOTE NOTE NOTE NOTE NOTE NOTE NOTE</p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element -->
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.