Move Image down with text CSS - css

Question

I have a div with some text, then an image underneath the text, whenever you add more text it goes behind the image, (basic example I created in jsfiddle I want it to push the image down just far enough so you can see the text. However I want the two boxes to still be inline, so the images stay consistent, ideally I don't want to just change the height of the div as this text is constantly changing.
<div class="box one">
<div>
<h1>Some text 1</h1>
<p>My paragraph of text is not going to be visible behind the car</p>
</div>
<a href="http://www.google.co.uk">
<img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
</a>
</div>
<div class="box two">
<div>
<h1>Some text 2</h1>
<p>My paragraph of text is not going to be visible behind the car again!</p>
</div>
<a href="http://www.google.co.uk">
<img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
</a>
</div>
.box {
color: #333333;
font-size: 12px;
height: 305px;
padding: 10px 15px 0;
width:150px;
}
.box div {
color: #333333;
font-size: 12px;
height: 90px;
padding: 10px 15px 0;
}
.two {
float:right;
margin-top:-310px;
}

Answer 1

Remove height and put min-height: 90px;
.box div {
color: #333333;
font-size: 12px;
padding: 10px 15px 0;
min-height: 90px;
}
http://jsfiddle.net/KApb6/10/

Answer 2

It is happening because you have given height:90px to .box div.
Instead of height, write this 'min-height:90px'.
Here is the fiddle.

Answer 3

So basically you want your text height to stay consistent between all your boxes?
This is quite hard.
One solution is to put every block you have in one row container, like this:
<div class="header">
<div class="one">Some text one</div>
<div class="two">Some text two</div>
</div>
<div class="image">
<div class="one"><img src="image-one.jpg"></div>
<div class="two"><img src="image-two.jpg"></div>
</div>
Or similarly with tables, but it would be hideously hard to maintain all the styles and layout in check.
Other way is just to use javascript to set the height, which is way easier.

Answer 4

Codepen
See this code to know if is the result that you want.

Answer 5

You could put the text in one box and the images in anorther one.
<div class="clearfix">
<div class="box one">
<div>
<h1>Some text 1</h1>
<p>My paragraph of text is not going to be visible behind the car</p>
</div>
</div>
<div class="box two">
<div>
<h1>Some text 2</h1>
<p>My paragraph of text is not going to be visible behind the car again!</p>
</div>
</div>
</div>
<div class="clearfix">
<div class="box one">
<a href="http://www.google.co.uk">
<img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
</a>
</div>
<div class="box two">
<a href="http://www.google.co.uk">
<img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
</a>
</div>
</div>
Then in the css remove the height of the div and add the clearfix class:
.box div {
color: #333333;
font-size: 12px;
padding: 10px 15px 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}