div floating problems

Alright, so I got this div:

#content .entry-title {
    color: #5d9851;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.3em;
    margin-left: 30px;
    width: 520px;
    overflow: hidden;
    border-bottom: 1px solid #97fb83;
}

and it won'开发者_运维百科t go on the side of .grayblock like .stripedbar does:

.stripedbar{
    background-position:left top;
    background-repeat: repeat;
    background-image:url('images/bar.png');
    height: 20px;
    width: 520px;
    margin-left: 30px;
    margin-bottom: 0px;
}

.grayblock{
    background-color: #cccccc;
    height: 40px;
    width: 20px;
    float: left;
}

Any idea how to make it play nicely (be on the side of .grayblock, and right under .stripedbar)?

This is the blog: http://prime.programming-designs.com/blog/

You have this code in your stylesheet:

h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}

So, .entry-title block is clearing float of .grayblock. You need to add clear:none; to #content .entry-title styles and it will work nice.

Add clear:none property to <h2> tag or #content .entry-title as it doesn't allow for floating elements to either side currently.