Wrapping div doesn't accept image height

Question

This is my first question, so please, be patient to me, thanks.

I am making website in wordpress. I have div which wraps content with image on left and some paragraph on right. And the background of transparent-box have height of the text (which is shorter), and ends in the middle of image (which is on left).

Here is my code:

<div class="transparent-box">
  <img class="alignleft" src="img/img.jpg" width="480" height="319" />
  <div class="tr-text">
    <p>some text</p>
  </div>
</div>

And style.css:

img.alignleft {
  float: left;
  margin-right: 30px;
}

.transparent-box {
  background: rgba(255,255,255,0.5);
  margin-top: 20px;
}

p {
line-height: 1.34;
margin-bottom: 14px;
font-size: 15px;

}

If I used it didn't helped me. I think the problem is easy to find solution, but I tried many ways which didn't work. I tried transparent-box auto or 100% height but it didn't work too.

Thank you so much!

have you tried using a clearfix ? http://stackoverflow.com/questions/8554043/what-is-clearfix — Joel Almeida, Apr 09 '15 at 08:40
Oh I tried clear too, but after the last div, huge little mistake :-/ — Bonnie Vlášková, Apr 09 '15 at 08:50

G.L.P · Answer 1 · 2015-04-09T08:44:19.303

0

Hope this is what you want: Demo

HTML:

<div class="transparent-box">
    <img class="alignleft" src="img/img.jpg" width="480" height="319" />
    <div class="tr-text">
        <p>some text</p>
    </div>
    <div class="clear"></div>
</div>

CSS::

.clear{
    clear:both;        
}

You have float for img. So you need to clear float property in order to get full height

edited Apr 09 '15 at 08:44

answered Apr 09 '15 at 08:41

G.L.P

7,119
5
25
41

Damn :) You were 5 sec faster:p – Apr 09 '15 at 08:43
This is what helped me. I tried it but at wrong line. Thank you! – Bonnie Vlášková Apr 09 '15 at 08:51

score 0 · Accepted Answer · answered Apr 09 '15 at 08:42

0

Adding display:inline-block for your .transparent-box?

answered Apr 09 '15 at 08:42

R Lam

393
1
13

Nope, That wouldn't fix it, text would go to the left under the image – Apr 09 '15 at 08:48
This worked too, and the paragraph is verticaly centered with image, which makes nice look. Thank you! – Bonnie Vlášková Apr 09 '15 at 08:52

score 0 · Answer 3 · answered Apr 09 '15 at 08:51

0

Another solution :): Demo

overflow: hidden

this cause the same effect as K.B.M's solution.

answered Apr 09 '15 at 08:51

Giau Nguyen

41
4

Wrapping div doesn't accept image height

3 Answers3