CODEWITHSUNDEEP
cssimagehtmlcss-float
user2784439
user2784439

Reputation: 13

Make 2 images float to the right and directly under each other

I can't seem to make 2 images float to the right but directly underneath each other. I tried to put them in separate divs then float them but nothing happened what else can I try?

here is what I did:

    <div id="div1">
        <img src="img1.png">
    </div>
    <div id="div2">
        <img src="img2.png">
    </div>

Here's the CSS:

    #div1 {

    float: right;
    margin-bottom: 10px;
    }

    #div2 {

    float: right;
    margin-bottom: 10px;
    }

Upvotes: 0

Views: 12835

Answers (3)

thisiskatkat
thisiskatkat

Reputation: 400

Unless you need the float for something else, change your CSS to:

#div1, #div2 {
    text-align:right;
    margin-bottom: 10px;
}


EDIT: As per your comment, the images are in a container with text.

Here is a solution for such case: http://jsfiddle.net/PNxRZ/2/

HTML

<div class="text-container">
    <img src="img1.png">
    <img src="img2.png">
Lorem ipsum ...
</div>


CSS

.text-container img {
    float:right;
    margin: 0 0 10px 10px;
}

Upvotes: 2

Gar
Gar

Reputation: 862

this is what i'd do:

html:

<div id="div1">
        <div>
        <img src="img1.jpg">
        </div>
        <div>
        <img src="img2.jpg">
        </div>
</div>

css

#div1 { width: 100%;display:block;}
#div1 div { width:100%;height:auto;display:block;clear:both;}
#div1 div img {display:block;float: right;}

Upvotes: 1

bchhun
bchhun

Reputation: 18474

add a div.clearfix between your 2 divs

<div id="div1">
    <img src="img1.png">
</div>
<div class="clearfix"></div>
<div id="div2">
    <img src="img2.png">
</div>

its style should be:

.clearfix {
    clear:both;
}

Upvotes: 4

Related Questions