Element not Floating Left

This is bothering the crap out of me and I can't see what's not allowing it to float left.

I've set a margin-left of 120px to the header text (450 Set, 230 Set, etc.) and did a float left to the link ele开发者_高级运维ment with the image inside of it.

Here's the link to the site where it's happening: http://cl.ly/6lQa

What am I over looking or not seeing?

Thanks!

It's the h2 tag that's screwing it up. Use a div tag instead and apply the styles that you want.

Generally, I refrain from using the h1,h2,h3,h4..... tags because they come with pre-done stylings. I prefer to create classes for all of my stylings and use div or span tags. Only if I'm doing SEO, I'll use some h1,h2 tags at the top, but nothing more than that.

On a side note, you should also try to get away from relying on float. It is not a good way to go..... different browsers handle it differently, and many times I get errors like what you were getting here. Instead of float, use position:relative and place the elements on the page by specifying the pixels at which you would like them (e.g. left:200px, top:100px etc).

I just started using BlueprintCss, which provides a great framework to easily layout pages. It divides the page up in a grid, and using pre-defined classes, you layout the page (without floats!). It's amazing, you should look into it.

You should move <h2 class="entry-title"> above the a element containing your image.

Set a width on the <h2> that will fit into the remaining space (with the 120px margin) OR better yet use a <div> instead of the h2 and style the font the same way