Question

I am trying to split the content into 2 columns

using the below CSS

.container2 {width: 320px; height: 100px; display: block;}
.image2 {border: 1px solid #F2F3F4;
    float: left;
    height: 50px;
    margin-right: 6px;
    padding: 1px;
    width: 50px;}
.image2 img { height: 50px; width: 50px;}
.text2 {width: 230px; height: 100px; float:left; font-size: 13px;}
.clear2 {clear: both;}

here is my page http://www.applicationcatalyst.com/columns/
(but the content is in single column)
Now I would like to know what extra I need to add in the CSS code to make the content
split into 2 columns

Thanks

Answer 1

You should do the following:

Put the following div in one div with class ‘ColumnDiv’ or something.
(image2 & text2)

so you have this:

<div class="ColumnDiv">
<div class="image2">
<img src="http://www.applicationcatalyst.com/storage/other/cakehealth.png"/>
</div>
<div class="text2">Track and Optimize Your Healthcare.</div>
</div>
<div class="ColumnDiv">
<div class="image2">
<img src="http://www.applicationcatalyst.com/storage/other/greengoose.png"/>
</div>
<div class="text2">Farmville for real life, with wireless sensors.</div>
</div>

<div class="clear2"/>

and in css you need to put the following:

.ColumnDiv
{
float:left;
}

Now your divs will show next to each other.
And i guess .clear2 is for evening out the length of both columns.