CODEWITHSUNDEEP
csspositioningimage
dodgerogers747
dodgerogers747

Reputation: 3345

Display image in right hand corner of dynamic element

I have an "article-box" that is used for a few different pages with 2 different widths. I have an image that i would like to display in the top right hand corner of each of these boxes. how could i use css to display the image correctly in the top right hand corner for each box?

i have the following css code which doesn't quite work, thanks in advance.

.wide-article-box {
    @extend .article-box;
        padding: 20px;
        max-width: 900px;

    #badge {
        position: relative;
        max-width:260px;    
    }

    #badge img {
            position: absolute;
        border-width: 0px;  
    }       
}

and in the view

    <div class="wide-article-box">
     <!--text etc -->
      <div id="badge">  
        <%= image_tag "BLH_BADGE.png" %>            
      </div>
       </div

Upvotes: 0

Views: 242

Answers (2)

Aman
Aman

Reputation: 76

You can look into the float property of CSS. It will also automatically wrap text around the image (or any block element).

#badge {
    float: right;
    max-width: 260px;    
}

P.S. you might also have to use clear css property but that will depend on the nature of the DOM. just read up on on float and clear properties

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47667

.wide-article-box {
    @extend .article-box;
        padding: 20px;
        max-width: 900px;
        position: relative;

    #badge {
        position: absolute;
            top: 0;
            right: 0;
        max-width:260px;    
    }

    #badge img {
        border-width: 0px;  
    }       
}

Upvotes: 1

Related Questions