Thread: What is wrong with my CSS code?

What is wrong with my CSS code?

Hi guys.
I have a small problem with CSS. I don't know much about css, but I managed to create styled homepage, but not everything looks as I wish. Below is the code. I hope someone could tell me what I have done wrong. The page address is www.lawsolicitor.ie
Here is my css:

#contenta {width:800px;
float: left;}
#co1 {width:448px;
float:left;
font-size: 12px;
margin-right:10px;
border: 1px solid #c0c0c0;
border-bottom-left-radius: 10px;
padding: 4px;
background-color: #fbfbfb;
}
#co1a {width:112px; float:left; margin:0px, padding:0px;}
#co1b {width:112px; float:left; margin:0px, padding:0px;}
#co1c {width:112px; float:left; margin:0px, padding:0px;}
#co1d {width:112px; float:left; margin:0px, padding:0px;}
#co1-after {width:448px; margin-top:-25px; font-size: 15px;}
#co2 {width:310px; float:left; margin:0px, padding:0px;
}

and html:

<div id="contenta">
<div id="co1">
<div id="co1a"><links column 1</div>
<div id="co1b"><links column 2</div</div>
<div id="co1c"><links column 3</div</div>
<div id="co1d"><links column 4</div</div>
<div style="clear: both;"></div>
<div id="co1-after">
<h2>Solicitors in Ireland</h2>
links below the 4 columns

</div>
</div>
<div id="co2">image slider</div>
<div style="clear: left;"></div>
</div>

My problem is:
1. I can't change font-size in #co1 div. No matter what size I enter, font doesn't change.
2. The content of the page (header "Find Solicitors in...") appears slightly lower in Firefox than in Chrome. Is there any way to make it appear on the same level in both browsers?
3. When browsing the page on screen smaller than 15 inches, then the image slider moves under #col1 div. How can I make those two divs appear always next to each other?
4. Also when browsing the page on small screen, then other content of the page comes on top of the right sidebar. It looks very ugly then. How can I make it stay where it meant to be?

Any advice would be greatly appreciated.