Question

Can’t post this on jsfiddle since it seems down.

div.browseBuildsArea-pro 
{
   float: left; 
   position: relative;
   width: 790px; 
   height: 90px; 
   background-image:url('../images/builds/builds-bg-pro.jpg'); 
   background-repeat:no-repeat;
}

div.browseBuildsArea-pro img.champion 
{
   display: block;
   height: 72px;
   margin-left: 14px;
   margin-top: 7px;
   border-radius: 9px;
   -moz-border-radius: 9px;
   -khtml-border-radius: 9px;
   -webkit-border-radius: 9px;
}

div.browseBuildsArea-pro div.build-poster 
{
    display: block;
    position: relative;
    margin-left: 150px;
    margin-top: 10px;
}

<div class="browseBuildsArea-pro">
<img class="champion" src="<%THEME%>images/lol/avatars/2.png">

<div class="build-poster">
    awdwada
</div>
</div>

I’m new to CSS so I need help on two things.
Is there any overuse of attributes in my styling?
“build-poster” div always goes under image. How can I get it on right side of image?

Thanks alot!

Answer 1

You don’t need to specify position:relative on <div> since you are not using any left, top, right and bottom properties on those divs. However it’s a good idea for older browsers such as IE7.

you need to add float:left to img.champion class