Okay I have 4 images all same width, but all have different heights (my images all increase in height, but it does not matter for this example). I have the following CSS:
.box {
float: left;
width: 670px;
height: 210px;
padding: 5px 0px;
margin: 0px;
text-align: center;
vertical-align: bottom;
line-height: 10px;
border: 1px solid red;
position: relative;
}
.pic {
border: 1px solid blue;
position: relative;
bottom: 0;
float: left;
}
<div class="box">
<a <img alt="img01" src="img01.png" class="pic" /></a>
<a <img alt="img02" src="img02.png" class="pic" /></a>
<a <img alt="img03" src="img03.png" class="pic" /></a>
<a <img alt="img04" src="img04.png" class="pic" /></a>
</div>
So I end up with 4 images side by side, but aligned to top of div. Instead I want to align bottom of all images to bottom of div, but still have them flow to the right.
If make change to code as follows:
.pic {
border: 1px solid blue;
position: absolute;
bottom: 0;
float: left;
}
It doesn't work as now all images line up at bottom of div, but all are on top of each other (I assume float is ignored because of absolute position?).
I've searched through many posts, and they all seem to suggest using absolute positioning- while this works for one image, it does not allow side-by-side flow of images at bottom. I'm going to use tables as a last resort, but surely this can be done in CSS?
If someone can help please, what is the correct code needed to to align bottom of more than one image to bottom of div, but still have them flow to the right?
