I have two divs. Both 50% width, one on the right and one on the left. Inside the right div is an image set to max-width: 100%.
This all works fine until you view in a tablet. The text on the left side are relatively longer - longer than the height of the image on the right div. Because of the properties of the image, I need it to always sit on the bottom of its div. I can’t use position: absolute as this breaks the responsive sizing of the image. Can anyone suggest an alternative?
I’ve attached two images. One with the view in a desktop (left) and the other in the problematic tablet.
There will eventually be navigation at the top and other content below but what I need is for the model to sit nicely at the bottom of the div no matter the device. The problem is that in the tablet the width of the text is reduced and consequently the div becomes longer.
I guess it might mean just using media queries to make sure there is a top margin for the image if it is a tablet?
What I suggested in post 2 does work. Make sure to put vertical-align: botton on the table-cell divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.wrap {display: table;}
.wrap div {display: table-cell; vertical-align: bottom; width: 50%;}
</style>
</head>
<body>
<div class="wrap">
<div>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
<div>
<img src="image.gif">
</div>
</div>
</body>
</html>
Yes, it works in the example. It must be something conflicting in mine. This is great though because now I have this working I can peel down the rest of the code and start again. Thanks for your help, much appreciated.