Images not staying in div

[jthensley]

I'm new to CSS, and have been recoding my page in HTML 5 and CSS. In the left hadn column, I am having issues with the images. the main page can be seen at [beta.jthensley.com...] and the CSS file is at [beta.jthensley.com...]

the issues are at the top and bottom of the left column. At the top is a Follow Us button that doesn't want to stay centered in the column, and at the bottom is a CSS Award that seems to want to sit at my feet on the right. (Humbling, but I want it on the left-column instead of the corner of the page.)

The CSS code for the left column is:

#content-left {
font-size: 11px;
float: left;
width: 210px;
padding: 20px 32px 20px 20px;
}


#content-left img {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

We are close to the deadline to launch our new site and I'm pulling my hair out!

[lucy24]

Uh-oh, you missed the part about Do Not Post Links to your own page. But while waiting for the moderators to nip in and take action, I took a quick look. Among other things I found that
:: cough, cough ::
you must have added some stuff to the CSS after it passed validation, because it no longer does-- and the HTML validator made an even bigger fuss.

So that's a start. But a good deal of the site design seems to be lurking in the javascript... which requires someone with younger eyes than mine. You're not paying by the byte, are you? Put in some whitespace, fer hevvins sakes. You're not posting Google Analytics there.*

My preliminary hunch is that the divs don't add up right, so the validation icon that's supposed to be in the left column has ended up on the right.


* For some reason that now escapes me, I once had a look at the GA code. One single solid block of text without ever a pause for breath. You can only do that when you're absolutely positive you will never again need to change a single line.

[jthensley]

Ok, I had tested something in the CSS. I changed it back.

Now the CSS reads

#content-left {
font-size: 11px;
float: left;
width: 210px;
padding: 20px 32px 20px 20px;
}

I had a quick look at the html. Everything looks good. All the div's are closed properly. It seems with images, they aren't aligning to the center of that div.

[jthensley]

I took out the center tags, and used CSS

style="text-align: center;"

instead. All the validation errors come from Blogtalk radio and paypal codes generated by those sites (go figure)

[lucy24]

What's the height of #content-left ? Simply the sum of its parts, or is there an explicit height declaration hiding somewhere else?