CODEWITHSUNDEEP
csshtmlimage
JohnFajardo
JohnFajardo

Reputation: 95

Aligning images inside divs

I'm trying to fit three images inside a div, but I'm having trouble getting them to align properly. This is what I have in mind:

alt text http://img245.imageshack.us/img245/2016/divsf.jpg

But I can't for the life of me figure this one out. Can anyone please lend a hand? Thanks!

Upvotes: 1

Views: 443

Answers (3)

Steve
Steve

Reputation: 2526

CSS

div#container {
    width:400px;
    height: 400px;
    padding:50px;
    background: red;
}
div.leftbox {
    float: left;
    width:175px;
    height: 175px;
    margin-bottom: 50px;
    background: blue;
}
div.rightbox {
    float: right;
    width: 175px;
    height: 400px;
    background: yellow;
}

HTML

<div id="container">
    <div class="rightbox">
        Right Image Box
    </div>
    <div class="leftbox">
        Left Image Box Top
    </div>
    <div class="leftbox">
        Left Image Box Bottom
    </div>
</div>

Upvotes: 0

fantactuka
fantactuka

Reputation: 3334

http://jsfiddle.net/tMxkX/2/

Upvotes: 1

NPC
NPC

Reputation: 1039

If changing markup is allowed, I propose to wrap img 1 and 2 in another div - then it is just a matter of floating the div to the left.

Upvotes: 0

Related Questions