Menu
I have a div (with a fixed width) that has 2 image elements as children.
Each image is the same width as the div so the images are placed not on the same row (see screenshot) .
This is great, but I want the images to displayed the same way (one on top of the other) but at the bottom of the div.
I'm able to achieve such behavior in some browsers using:
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
on the div css.
Is there a nicer way to achieve that?
Here is the code I used for the example:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;
width:33px}
</style>
</head>
<body>
<div class="container">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div>
</body>
</html>
324
Make the container position:relative; and set the images to position:absolute; bottom:0;
However, this will not stack the images. They will overlay each other. If you need them stacked, the easiest (dynamic) way is to wrap the images with another container (like a div), and then set the styles on it. For example...
Markup:
<div class="container">
<div class="innerContainer">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
</div>
</div>
CSS:
.container {
background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;
height:116px;
width:33px;
position:relative;
}
.container .innerContainer {
position:absolute;
bottom:0;
}
The solution: Add an innner div and set its position to bottom:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative;
width:33px;}
.inner {position:absolute;bottom:0px;}
</style>
</head>
<body>
<div class="container"><div class="inner">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div></div>
</body>
Thanks to Josh for suggesting this.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With