CODEWITHSUNDEEP
css
user1330271
user1330271

Reputation: 2691

positioning span element on the right of a div

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;
        }

Upvotes: 0

Views: 303

Answers (3)

Sully
Sully

Reputation: 14943

Just add display:inline to the rating div

    div.rating {
        position: relative;
        display:inline; /* add this */
        width: 84px;
        height: 14px;
        overflow: hidden;
    }

here + more styling to get it to fit http://jsfiddle.net/j5mxZ/ -- Edit without styling http://jsfiddle.net/j5mxZ/1/

Upvotes: 1

Hope4You
Hope4You

Reputation: 1947

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.

Upvotes: 2

j08691
j08691

Reputation: 207861

Try changing the order of the spans in your HTML:

<div>
    <h1>name</h1>
    <span>omg: <a href="#">omg</a></span>
    <span>x avaliations</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>
</div>

Upvotes: 1

Related Questions