DIV height adjustment to fit image

Question

I'm trying to make a DIV, which is pretty much a box with a frame that has an image aligned to the left and text that is to the right of the image. Here's how I set it up:

<div style="padding:1%; border-style:solid; border-size:1px; width:100%;"> <img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" /> Here is some text. </div> 

The problem is that if the image is above the text, the surrounding DIV (and therefore the border) itself determines the height, which should correspond to all the texts, but the image is overflowing from the DIV.

How can I make the DIV change its height so that it matches the one above (image or text) so that both fit into the frame?

Thanks.

Answer 1

Add display: inline-block" to your div.

 <div style="padding:1%; border-style:solid; border-size:1px; width:100%;display: inline-block"> <img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" /> Here is some text. </div> 

Answer 2

add one property to div

 overflow: hidden; 

absolutely it will work.

Answer 3

Add some element with clear: both; in the "backup" space for floating elements:

 <div style="padding:1%; border-style:solid; border-size:1px; width:100%;"> <img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" /> Here is some text. <div style="clear: both;"></div> </div> 

Answer 4

I would use clearfix , you can find out more about it here

Also, be careful, there is no border-size attribute, what you were trying to do was border-width .

Just my opinion here, these are the best practices for not using inline styles .

So you have a clean solution.

So see below snippet:

 .clearfix:before, .clearfix:after { content: ""; display: table; clear: both } div { padding: 1%; border: 1px solid #000; width: 100%; } div > img { float: left; max-width: 30%; max-height: 200px; } 

 <div class="clearfix"> <img src="http://i.imgur.com/FwgZFNn.jpg" />Here is some text. </div> 

Answer 5

Just before the end of the div ie before </div> you need to clear the float. The error is due to the float style of the image. To clear the float just add this

 <span style="clear:both;"></span> 

Before the </div> .