Creating responsive div on text content with no Bootstrap - css

Question

I am trying to create responsive div with image, text and spacing between divs.
I had divs with spacing and text but they wouldn't resize on more text.
I am trying to achive something like this.
This one is with more text in some of the divs and every other div resizes as well.
Here is what i got:
.img{
width:300px;
height:100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h3{
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 105px;
left: 0;
width: 300px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>
</div>
i need div to resize to amount of text and covers bottom part of it.
Currently i am breaking text with < br > which is not how i am aiming to do it.

Answer 1

Try word-wrap: break-word; property on h3
h3{
word-wrap: break-word;
}
Hope this Helps..

Answer 2

In case you'd like to have hyphenation, you could use the css "hyphens" property, which lets the browser decide where to break. See an example (with fallback, as the browser support is not so good, especially for some languages)
h3 {
word-break: break-word; /* non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.img{
width:300px;
height:100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h3{
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 105px;
left: 0;
width: 100px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3 lang="en">A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3 lang="en">Incomprehensibilities </h2>
</div>

Answer 3

sadasdsadsadsadsadsadasdasdsadsadsadsadas this is garbage value, this is not word you can use like this
.img{
width:300px;
height:100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h3{
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 105px;
left: 0;
width: 300px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>sadasdsa dsadsadsadsa dasdasdsads adsadsadas</h2>
</div>

Answer 4

you can use word-break: break-all; to h3
.img{
width:300px;
height:100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h3{
background-color: rgba(0, 0, 0, 0.5);
word-break: break-all;
position: absolute;
top: 105px;
left: 0;
width: 300px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>
</div>