Nested Columns

(2 posts) (2 voices)

1. 

   UpstreamSupport
   Member

   I have a simple two column layout made with shortcodes. I want to split the left column into two, but only a part of the column. For instance, if this were a table, "one cell" in the "middle" left hand column would be split into two columns.

   Is it possible to nest shortcodes to split one column into two? More appropriately, using DIVs?

   It seems like I should be able to use standard DIVs and custom CSS, but haven't had any luck getting it to work:

   <div class="example1">
   <div class=”example_column1">Column 1</div>
   <div class="example_column2">Column 2</div>
   <div class="example_column3">Column 3</div>
   </div>

   -----------------

   div.example1
   {
   width: 600px;
   color: #ffffff;
   }
   div.example1 div
   {
   float: left;
   width: 200px;
   height: 100px;
   }
   div.example1 div.example_column1
   {
   background-color: #121212;
   }
   div.example1 div.example_column2
   {
   background-color: #454545;
   }
   div.example1 div.example_column3
   {
   background-color: #787878;
   }

   But... I wasn't able to get this to work.

   Thanks,
   John

   Posted 4 months ago #
2. 

   Elliott
   Support

   Hello UpstreamSupport,

   You can nest the shortcodes as long as they are not the same type. Here is how you would do it if your just using one_halfs,

   [one_half]
   
   first column 
   
   <div class = "one_half">
   first column
   </div>
   
   <div class = "one_half last">
   second column
   </div>
   
   [/one_half]
   
   [one_half_last]
   
   second column
   
   [/one_half_last]

   Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.