CODEWITHSUNDEEP
htmlcss
19wolf
19wolf

Reputation: 402

Align images to bottom of page

This seems to be a common problem but I'm having trouble. When I set my css with 

position: absolute; 
bottom: 0;

, all my images end up overlapping each other, instead of being displayed next to each other, on the bottom. How do I fix this?

Edit: I can't encase them in their own div because when clicked, the targeted image is supposed to go to the top of the page 

:target{
 position:absolute; 
 top:0
}

Edit: Code:: http://jsfiddle.net/5MXLb/

div#main{
    text-align: center;
}

.gallery{
    display: inline-block;
    height: 100%;
}

.gallery img{
    display: inline-block;
    max-height: 10%;
    bottom: 0;
    position: absolute;

}
.gallery img:target{
    position: relative;
    top: 0;
    max-height: 90%;
}

HTML: 

<div id="main">
        <div class="gallery">
            <a href="#img1"><img id="img1" src="http://placehold.it/200" /></a>
            <a href="#img2"><img id="img2" src="http://placehold.it/400" /></a>
            <a href="#img3"><img id="img3" src="http://placehold.it/600" /></a>
            <a href="#img4"><img id="img4" src="http://placehold.it/800" /></a>
            <a href="#img5"><img id="img5" src="http://placehold.it/1000" /></a>
        </div>
        </div>

Upvotes: 2

Views: 38548

Answers (3)

kalley
kalley

Reputation: 18462

If you're only targeting newer browsers, you can use flexbox. http://jsfiddle.net/5MXLb/1/

I've only included the -webkit prefixed versions.

div#main{
    text-align: center;
    height: 100%;
}
html, body { height: 100%; }
.gallery{
    display: -webkit-flex;
    height: 100%;
    -webkit-align-items: flex-end;
    -webkit-justify-content: center;
}
/* this stops the shrinking of the items */
.gallery a {
    -webkit-flex-shrink: 0;
}

.gallery img{
    display: inline-block;
    max-height: 10%;

}
.gallery img:target{
    position: absolute;
    top: 0;
    max-height: 90%;
    left: 50%;
    -webkit-transform: translateX(-50%);
}

But I think this does what you're looking for.

Upvotes: 2

Ishan Jain
Ishan Jain

Reputation: 8161

Set CSS on your <a> - 

.gallery a{
    display: inline-block;
    margin-right: 20px;
    width:30px;    
}

Try This

After Update -

Try This also

Upvotes: 0

Praveen
Praveen

Reputation: 56501

Wrap the images within a div positioned in absolute and place it at the bottom like

<div>
    <img src="http://dummyimage.com/100x100/000/ff0000" />
    <img src="http://dummyimage.com/100x100/000/ff0000" />
</div>

CSS:

div {
    width:100%;
    position: absolute;
    bottom:0;
}
img {
    position: relative;
    display: block;
    float: left;
}

Check this fiddle

Upvotes: 4

Related Questions