Question

The following html shows a item information. I’m trying put the avaliation span on the right of the rating div. If I float the rating to the left, it goes to the top of the another span. I’m sure it’s a easy problem to solve, but I tried a lot without find out a solution that avoids dirty code.

                <div>
                    <h1>name</h1>
                    <span>omg: <a href="#">omg</a></span>
                    <div class="rating">
                        <span class="stars-2">
                            <img src="stars.png" width="86" height="91" title="4 star rating" alt="4 star rating" />
                        </span>
                    </div>
                    <span>x avaliations</span>
                </div>

The rating CSS:

        div.rating {
            position: relative;
            width: 84px;
            height: 14px;
            overflow: hidden;
        }

        div.rating span {
            position: absolute;
            left: -1px;
        }

        div.rating span.stars-0 {
            top: -1px;
        }

        div.rating span.stars-1 {
            top: -16px;
        }

        div.rating span.stars-2 {
            top: -31px;
        }

        div.rating span.stars-3 {
            top: -46px;
        }

        div.rating span.stars-4 {
            top: -61px;
        }

        div.rating span.stars-5 {
            top: -76px;
        }

Answer 1

Add style="float:left;" to the rating div and the aviliations span. (Better yet: add float:left; to the CSS file for these elements).

Then, put <br clear="all" /> before the rating div and after the avaliations span.