HTML: Div is not effected by image size

Question

I have set up a div however the image inside of it exceeds its limits due to float:left. Anything possible to fix this?

Here is my code:

<html>
<head></head>
<body>
<div style='width:600px;min-height:50px;border:1px solid black;padding:5px;'>
<img src='pic.jpg' style='border:1px solid #C0C0C0;padding:5px;float:left;height:150px;width:150px;'>
<div>
<p>There are a lot of things </p>
</div>
</div>
</body>
</html>

Clear the float: http://stackoverflow.com/questions/6328080/methods-of-clearing-floats-effects — Tim M., Apr 02 '12 at 00:47

score 2 · Accepted Answer · answered Apr 02 '12 at 00:47

2

Use overflow:hidden to parent div

answered Apr 02 '12 at 00:47

Dips

3,220
3
20
21

Alex North-Keys · Answer 2 · 2012-04-02T01:18:55.100

1

<html>
  <head></head>
  <body>
    <div style='width:600px;min-height:50px;border:1px solid black;padding:5px;'>
      <img src='pic.jpg' style='border:1px solid #C0C0C0;padding:5px;float:left;height:150px;width:150px;'>
      <div>
        <p>There are a lot of things </p>
      </div>
      <br style="clear:both;"/>            <!-- the addition -->
    </div>
  </body>
</html>

edited Apr 02 '12 at 01:18

answered Apr 02 '12 at 01:12

Alex North-Keys

4,200
1
20
22

score 0 · Answer 3 · answered Apr 02 '12 at 00:49

OK, I am not entirely sure what you are asking, So if this is a wrong answer I apologize in advance, but change:

    <img src='pic.jpg' style='border:1px solid C0C0C0;padding:5px;float:left;height:150px;width:150px;'>

To:

    <img src='pic.jpg' style='border:1px solid #C0C0C0;margin:5px;float:left;height:150px;width:150px;'>

Padding will usually expand the width of the parent container, so try margin.

score 0 · Answer 4 · edited May 23 '17 at 10:34

0

If you want the containing box to expand to fit the image, clear the float.

Few examples of clearing a float: http://jsfiddle.net/MJK4u/1/

More advanced techniques (recommended) for clearing floated elements: methods of clearing float's effects

If you want to hide the overflow, use overflow-hidden. If you want the overflow to scroll, overflow-scroll.

edited May 23 '17 at 10:34

Community

1
1

answered Apr 02 '12 at 00:49

Tim M.

53,671
14
120
163

score 0 · Answer 5 · answered Apr 02 '12 at 04:48

Hi you can do with two thing as like u

There are two solution of this problem .

think you can define your parent overflow hidden because this is collapse margin problem

as lik this

css

.parent{
    width:600px;
    min-height:50px;
    border:solid 1px black;
    overflow:hidden;
}
img{
    display:inline-block;
    border:solid 1px #c0c0c0;
    padding:5px;
    height:150px;
    width:150px;
    margin:10px;
}

.child{
    display: inline-block;
     vertical-align: top;
}

HMTL

<div class="parent">
<img src='pic.jpg' alt="sample img">
<div class="child">
<p>There are a lot of things </p>
</div>
</div>

Live demo click here http://jsfiddle.net/rohitazad/awEDY/1/

or

is you can define display inline-block of yout img tag and child div as like this

css

.parent{
    width:600px;
    min-height:50px;
    border:solid 1px black;
    overflow:hidden;
}
img{
    float:left;
    border:solid 1px #c0c0c0;
    padding:5px;
    height:150px;
    width:150px;
    margin:10px;
}

.child{

}

HMTL

<div class="parent">
<img src='pic.jpg' alt="sample img">
<div class="child">
<p>There are a lot of things </p>
</div>
</div>

Live demo http://jsfiddle.net/rohitazad/awEDY/3/

HTML: Div is not effected by image size

5 Answers5