Multiple Columns using Styles and Divs

[RonnieG]

I struggled with this for some of my pages with multiple columns using tables, and they just would not line up properly without lots of tweaking with extra line breaks, and needed more tweaking any time I added an item to any of the columns. Lining everything up was nearly impossible to achieve consistently, even with tables, until I figured this out with styles and divs.

For my purposes, I needed three equal width columns so:

For my REW site, I built a snippet for the style definitions that I named "three-column" for simplicity. This snippet needs to be included somewhere on each page that needs the layout. I put it just before the multiple column content. It could also be in a css file if you have access to that on your non-REW website, and then you wouldn't need it on each page.

===========================

<style type="text/css">
<!--
div.three_col {
position: relative;
display: inline;
float: left;
left: 10px;
width: 33%;
min-width: 240px;
}
div.clrboth {
clear: both
}
-->
</style>

==========================

I won't explain every style or its attributes, but a couple bear some comments:

You can change the styles for 2 or 4 or as many equal width columns as you like. The 33% width is pretty obvious. Change it to 50% for 2 equal columns, 25% for 4 equal columns, etc. Also change the min-width as required. For three columns, min-width is set to exactly 1/3 of your available main content area width. Your min-width will probably be different, and you just need to figure that out. You may not really need it. I just like to know for certain that each column will be a particular number of pixels wide. I added a 10 px left margin within each column to indent the whole structure a bit, but you can use 0 or any other margin you may like.

Then, I built my page, as per example at:
denverhomevalue . com / demo-three-column.php

I started by simply entering each column's contents, column by column, including heading styles, bullets, etc. Then I went into html mode and added divs around and between the columns to apply the style formatting. The end result doesn't render in the page editor the same way it does in a browser, but IMO that is a small inconvenience.

The page html code:

========================================

<p>#three-columns#</p>
<div>
<h2>Example Three Column Layout using CSS Styles and Divs</h2>
<div class="three_col">
<h3>Column 1 Heading</h3>
<ul>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
<li>Item 1-4</li>
<li>Item 1-5</li>
</ul>
</div>
<div class="three_col">
<h3>Column 2 Heading</h3>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</div>
<div class="three_col">
<h3>Column 3 Heading</h3>
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
</div>
</div>
<div class="clrboth"></div>
<h2>End of table</h2>

=================================

The end result is multiple columns that always line up with the top of each other, no matter how many items I may add to each column.

Enjoy!

[blakeeu]

very nice!!! just used it, but did just drop the whole thing into a snippet, and it works great (http://www.buddyblake.com/3columns.php)

[jessiesc]

Good job Ron.

For those who don't have a wide template, here is the code for a 2 column layout with a custom colored H3 tag:

===========================

<style type="text/css">
<!--
div.two_col
{
position: relative;
display: inline;
float: left;
left: 10px;
width: 50%;
min-width: 240px;
}
h3.two_col
{
font-family:"Times New Roman",Georgia,Serif;
font-weight:normal;
color: #FFFFFF; //Font Color change as needed
height: 20px;
padding:2px;
margin:5px;
background-color:#846B4C; //Background color change as needed
}

div.clrboth {
clear: both
}
-->
</style>

===========================
// Content starts here
<div>
<h2>Your text here</h2>
<div class="two_col">
<h3 class="two_col">Your Col 1 Heading Here</h3>
Add your content here using any html tags you require. You can add images or whatever content you need.
</div>

<div class="two_col">
<h3 class="two_col">Your Col 2 Heading Here</h3>
Add your content here using any html tags you require. You can add images or whatever content you need.
</div>

</div>
<div class="clrboth"></div>

===========================

If you have an REW site, place this entire code segment in a snippet. Give the snippet a name and call the snippet from the page. If you want to change the content, just change the snippet and you won't have to touch the page.

You can add custom H tags by copying the H3.two_col code and replacing H3 with whatever tag you want customized. Make sure when you use the custom H tags you add the correct class to the tag - <H4 class="two_col">.

Here's an example pccommercialrealestate . com / meettheteam.php

[RonnieG]

If you have reason to use the same content in multiple places, sure, it can all go into the snippet. But the main reason for putting only the style stuff in a snippet, and leaving content in each page, is that I use the same layout many times on my site, but with different content on each page. I also like to at least see all page content in one place, even if it is not rendered exactly as the user will see it in their browser.

Jessie,
Nice adaptation! You may want to use the same padding and margins on the two_col style as you did on the heading. Some of the text from the 1st column is butting up against the 2nd column.

[jessiesc]

If you have reason to use the same content in multiple places, sure, it can all go into the snippet. But the main reason for putting only the style stuff in a snippet, and leaving content in each page, is that I use the same layout many times on my site, but with different content on each page. I also like to at least see all page content in one place, even if it is not rendered exactly as the user will see it in their browser.

I can see that. I would just make more snippets but that's a personal preference.

Jessie,
Nice adaptation! You may want to use the same padding and margins on the two_col style as you did on the heading. Some of the text from the 1st column is butting up against the 2nd column.

Thanks Ron, yeah, I haven't finished that page yet as I have 3 more sets of columns to add below the top.

Maybe tomorrow