CODEWITHSUNDEEP
css
Ross Fedrik
Ross Fedrik

Reputation: 23

Splitting content into 2 columns CSS

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

Upvotes: 2

Views: 1649

Answers (2)

Pat
Pat

Reputation: 25685

If you don't want to make any changes to the HTML, you can do it by doing the following:

  1. Increasing the width of .container2 to hold both content blocks side by side.
  2. 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;
}

Upvotes: 2

Anthony Claeys
Anthony Claeys

Reputation: 251

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.

Upvotes: 5

Related Questions