Create many different columns on a single page

Have you ever wanted to create a page using a single column at the top, and below that, two, three or more columns, and then a single column or more beneath THAT?

It's relatively easy if you learn how to use html tables.

Let's begin with a basic page (it could be your index page, etc.)

If you make that page a SINGLE COLUMN page, you can then customize it any way you'd like.  So for example, you'd like a single column at the very top.  then simply drag ONE html block up to your index page in the Page Builder in your admin area.  Okay, place anything in this that you want.  Now, directly underneath, you want two columns to display side by side.  Now comes the fun.  Drag a second block directly below your first block.  Using the html editor, open it and insert the html code for a two-column table.

<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<th>Table header</th>

<th>Table header</th>

</tr>

<tr>

<td width="50%">Table cell 1</td><td>Table cell 2</td>

</tr>

</table>

The code above results in the following table.

You can see the basic code necessary to create your tables now. Using 50% rather than a fixed pixel width allows your page to stretch and shrink as the web browser is adjusted.

Now, all you need to do is remove the table border, and table header info to create two OPEN, Borderless blocks like so:

Now all you need to do is insert whatever you'd like to see appear in your blocks where the "Table cell 1 and Table cell 2 code is. Add more blocks and either add more tables like above, or simply insert your items.

You can just copy the table cell items as many times as you'd like to create 3, 4, 5 or more columns in a single block.  be SURE to adjust the widths accordingly for more blocks.  You can even adjust each table width individually by using the<table width="20%"> for each individual table.  Table 1 can have a 20% width, table 2 can have a 50% width, and table 3 can have a 30% width, or however best suits your needs.  This way your tables remain fluid on the page.

Now let's say that we wanted to do this with the profile or member account page.  Certain items do not appear at all on those pages as blocks and thus we're forced to deal with a 2 column set up or the profile pic ends up full widthed.  Any suggestions for that one?

Certain pages use coding inside of the php to render blocks since the content will be fluid (pulled from the database).  I've worked with blocks in the past using the actual php page, and html tables "should" be able to be used inside of those, since all the normal code is used, BUT, and this is a BIG BUT, where you have blocks being created on the fly from inside the php pages AND from outside of it, this would obviously present a big problem.  The only way I've worked with pages like this so far is to go to the referenced html page (say, page_10.html) and inserted tables above and below the main page code.  In this way, I get SOME control over the appearance.  My dashboard mod for the member's account page in 6.1 used this.  I simply inserted a single-width column above the columns which gave me a full page width column above the two columns of the rest of the page.

@bigal,

So if we put in the two or three columns below the first as stated, are we still allowed to drag an item into that cell? I understand the code part, and being able to modify it to suit our needs, but its the drag the featured items that i'm not sure about. Ex. say I had the featured members in the top column, and i wanted to say, put in forums and polls side by side in the column below. how would i go about doing that?

curious,

Derrick

On any SINGLE column, drag and drop will work just fine.  However, when creating html tables, drag and drop will not be an available option for those.  You must manually insert your code into the tables themselves.  This tutorial is basically showing you a way to create a page with many different columns manually, outside of the standard page builder's drag and drop.  You'll just be using the page builder to add your html blocks and then everything is manual after that.

Myself (Val) and Spike have been reading forums all day trying to learn more about how BoonEx works. I must say... I am extremely happy to have come across this neat little trick! bigal0228... THANK YOU for this! We can now start putting things ALMOST exactly where we want them!

KUDOS from Val & Spike!

Thank you very much for this i have been looking for ways to to this for a long time once again thank you!!!!!

This thing sounds very good.

Where can I see a sample of that? I want to see it applied before do this.