H2 Floats and Dynamic Div

Question

Hey everyone, here is the site in question:

http://www.myvintagesecret.com/

I have a bunch of posts on the front page. The header in in a H2 tag. Beside that, I will sometimes have a div called Clip. I want the title to wrap onto the next line IF there is a .clip div there.

My problem is that IF there is a .clip div AND there is a long enough title, it bumps the .clip div down. I want H3 to wrap and .clip to look like the 1st post.

    .clip {
    width:214px;
    height:275px;
    float:right;
    }

        #content h2 {
    color:#1A1A1A;
    float:left;
    font-size:20px;
    margin-left:30px;
    padding:70px 0 2px 0;
}

Answer 1

Try this:

#content h2 {
    color:#1A1A1A;
    float:left;
    font-size:20px;
    line-height:180%;
    margin-left:30px;
    max-width:335px;
    padding:70px 0 2px;
}

Answer 2

Why don't you just remove the float:left from the h2?

Edit: and make sure that the clip appears before the h2 in the html...

Answer 3

The best way i can think of atm is to manually add new class to this h2 everytime when title is too long and you are using that .clip <_<

Something like this:

.fix{
    line-height:180% !important;
    width:336px !important;
}