Aligning columns using css, help please.

Hey guys,

im having some issues getting my two columns to sit side by side.

I have 2 with divs classes of .columnL and .columnR in my content div.

The content width is 789px.

Can you please tell me where i am going wrong with this?

Heres the code:

#content .columnL {
width: 330px;
height: 340px;
background-image: url(assets/specialsbox.png);
background-repeat: no-repeat;
background-position: center;
margin-top: 13px;
margin-right: 0;
margin-bottom: 24px;
margin-left: 0;
padding-top: 13px;
padding-right: 0px;
padding-bottom: 0;
padding-left: 17px;
}

#content .columnR {
width: 287px;
margin-top: 13px;
margin-right: 0;
margin-bottom: 24px;
margin-left: 0;
padding-top: 0;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
}


#footer {
clear: both;

 

Below code should work, I just added float:left property to your both columnL and columnR class for content.

#content .columnL {
float: left;
width: 330px;
height: 340px;
background-image: url(assets/specialsbox.png);
background-repeat: no-repeat;
background-position: center;
margin-top: 13px;
margin-right: 0;
margin-bottom: 24px;
margin-left: 0;
padding-top: 13px;
padding-right: 0px;
padding-bottom: 0;
padding-left: 17px;
background-color:#000;
}

#content .columnR {
float: left;
width: 287px;
height: 340px;
margin-top: 13px;
margin-right: 0;
margin-bottom: 24px;
margin-left: 0;
padding-top: 0;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
background-color:#000ccc;
}


#footer {
clear: both;

 

Thats aswsome, thanks for the quick reply! appreciate the help.

 

You are Welcome!