10

I'm trying to make a DIV that's pretty much a box with a border that has a left-aligned image and text that's to the right of the image. Here's how I have it set 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 taller than the text, the surrounding DIV (and therefore the border) sizes itself to become the height it needs to be to fit in all the text, but the image overflows out of the DIV.

How can I make the DIV change its height to fit whichever is taller (the image or the text) so that both fit within the border?

Thanks.

Roko C. Buljan
  • 164,703
  • 32
  • 260
  • 278
Leon Overweel
  • 1,106
  • 4
  • 12
  • 26
  • can you post a jsfiddle with the problem? css/html – Stefan Nov 13 '14 at 14:56
  • The problem is that the img element in that div is floated. This link should be useful: http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing – Marcelo Nov 13 '14 at 15:01
  • 1
    You are trying to clear a float. I would search for that term in google. There are several solutions. – Joseph Marikle Nov 13 '14 at 15:02

5 Answers5

12

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>
mikelt21
  • 2,628
  • 1
  • 21
  • 33
  • Thanks @mikelt21 ! It generates a block element box that flows with surrounding content. – Kunj Dec 09 '16 at 06:13
3

add one property to div

overflow: hidden;

absolutely it will work .

Swapnil Motewar
  • 1,044
  • 6
  • 11
1

Add some element with clear: both; to "reserve" space for floated 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>
Justinas
  • 34,232
  • 3
  • 56
  • 78
  • 2
    There are ways to do this without including an empty div. Have fun maintaining a project that has dozens of empty divs with inline styles. – Steve Sanders Nov 13 '14 at 15:00
  • @SteveSanders Yes, there is. Like self-clearing div. But this one is simpler to understand and to use as beginning point – Justinas Nov 13 '14 at 15:05
1

I would use clearfix, you can learn more about it here

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

Just my opinion here, it is best practices not using inline styles.

This way you have a clean solution.

So please see snippet below:

.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>
dippas
  • 49,171
  • 15
  • 93
  • 105
  • Thanks! I wasn't using inline styles, but there's a lot of other CSS I'm working with, so I thought posting all that would be TMI; so I just took the relevant parts and put them as inline styles. – Leon Overweel Nov 13 '14 at 15:22
  • btw by using clearfix you can apply that class to all of the containers you may have on your project with these kind of issues, without needing to create extra html. – dippas Nov 13 '14 at 15:29
0

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

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

Just before the </div> tag.

monk
  • 4,281
  • 12
  • 38
  • 64