Splitting content into 2 columns CSS - css

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.

Answer 2

If you don't want to make any changes to the HTML, you can do it by doing the following:
Increasing the width of .container2 to hold both content blocks side by side.
Removing the clear: both from .clear2. This allows the content blocks to float next to each other.
The changed rules are below:
.container2 {
width: 640px;
height: 100px;
display: block;
}
.clear2{
clear: none;
}
What you'll then see is that your 2 columns aren't properly centered in the main content area. To fix this, you'll need to update the following 2 CSS rules to give them space:
#sidebar2Wrapper {
display: none;
}
#contentWrapper {
width: 800px;
}