CODEWITHSUNDEEP
htmlcss
Ali
Ali

Reputation: 5476

HTML: Div is not effected by image size

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>

Upvotes: 0

Views: 125

Answers (5)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Hi you can do with two thing as like u

There are two solution of this problem .

  1. 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

  1. 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/

Upvotes: 0

Alex North-Keys
Alex North-Keys

Reputation: 4363

<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>

Upvotes: 1

Tim M.
Tim M.

Reputation: 54359

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.

Upvotes: 0

Craig Barben
Craig Barben

Reputation: 148

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.

Upvotes: 0

Dips
Dips

Reputation: 3280

Use overflow:hidden to parent div

Upvotes: 2

Related Questions