CODEWITHSUNDEEP
htmlcss
Deepak Malhotra
Deepak Malhotra

Reputation: 253

Html issue with span being fixed

In my page there is section where I am displaying stars like:

* * * * * * * *

And at the end I want to write rating like 7/10 in straight line.

I tried many things but not able to solve it. I tried float:left and float:right.

In link http://ripemovies.com/released/2013/best-action-movies

code causing issue :

<span class="stars" style="margin-left:250px;margin-top:10px;">
   <span style="width: 128px;"></span>
</span>

Upvotes: 0

Views: 82

Answers (3)

Xilexio
Xilexio

Reputation: 1238

You seem to be mixing element types. span is "inline" element like text, while margin used on "block" elements like div.

Is what you're trying to achieve something like this? You could put <img style="display: block;"> with stars here instead of divs and set proper vertical aligns.

<div style="clear: both;">content</div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="display: block; float: left; margin: 1px; height: 30px;">5/10</div>
<div style="clear: both;">content</div>

Demo: http://jsfiddle.net/zP49p/

Upvotes: 0

Matt Gibson
Matt Gibson

Reputation: 38238

You can't tag things onto the end of your stars at the moment because they're styled as block. Change the stars to inline-block, then just tag your rating onto the end as a span.

inline-block will still allow you to do the block stylings you need to make the stars work, while letting the next element, your textual rating, continue on the same line.

Here's a jsfiddle example: http://jsfiddle.net/XrCjq/2/

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

You could just float the elements within it's own dedicated rating container

DEMO http://jsfiddle.net/kevinPHPkevin/AZ9zt/

.rating img {
    width:50px;
    float: left;
}
.rating p { 
  line-height: 45px;   
}

Upvotes: 1

Related Questions