Adding three columns under "content" in left sidebar page type
Permalink Browser Info Environment
Okay - I admit my knowledge of CSS is rudimentary.
I would like to add three columns under "content" (right column) in the left sidebar page type.
I have included two images - "good" is what I would like to achieve - it only works when I include all sub-menus in the side navigation, thus pushing the boxes over.
I tried wrapping everything on the right side in "content" but it doesn't help:
I tried floating and clearing, but I am not hitting on the correct combination.
Grateful for any help....
I would like to add three columns under "content" (right column) in the left sidebar page type.
I have included two images - "good" is what I would like to achieve - it only works when I include all sub-menus in the side navigation, thus pushing the boxes over.
I tried wrapping everything on the right side in "content" but it doesn't help:
<div id="wrapper">
<div class="row">
<div id="sidebar" class="col_3">
<?php
$as = new Area('Sidebar');
$as->display($c);
?>
</div><!-- #sidebar ends -->
<div id="content">
<div class="col_9 omega">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div><!-- #col_9 ends -->Viewing 15 lines of 36 lines. View entire code block.
I tried floating and clearing, but I am not hitting on the correct combination.
Grateful for any help....
| Type: | Discussion |
|---|---|
| Status: | New |
Thank you! The coded solution worked perfectly. I don't like using Layout for responsive sites - I am not sure how it will work.
By the way the client loves the site - you are making me look good!
By the way the client loves the site - you are making me look good!
You're very welcome!
Layouts are percentage-based so they will scaled down. Also, there's code in Slate that will make them collapse to one full width column once the browser reaches a certain size (on mobile).
Layouts are percentage-based so they will scaled down. Also, there's code in Slate that will make them collapse to one full width column once the browser reaches a certain size (on mobile).
http://www.concrete5.org/documentation/using-concrete5/in-page-edit...
But if you want to do it in the page type file, add the class="col_9 omega" back to the #content div. Then move this code up into the #content div after the Main area code so it looks like this:
<div id="content" class="col_9 omega"> <?php $a = new Area('Main'); $a->display($c); ?> <div class="col_3"> <?php $a = new Area('Column One'); $a->display($c); ?> </div><!-- #col_3 ends --> <div class="col_3"> <?php $a = new Area('Column Two'); $a->display($c);