Image tag in the div overflows

Question

I was creating a simple html with a header and logo in it. Im doing this for email templates, so all are inline styles. I noticed there is a float break happening and the image is overflowing its parent.

<div style="width:640px;">
        <!--  header -->
        <div id="header" style="background-color:#005387; height:160px;">
            <div id="logo-container" style="margin-top:20px;margin-left:20px;">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw">
            </div>
        </div>
    </div>

http://jsfiddle.net/HMswX/8/

Any idea why this is happening? When I add overflow:hidden to #header elem, it works fine. But Im not floating any element within that, then why is there a float break?

EDIT:

Okey, I wasnt clear enough. Updated the code. I want to add margin-top to #logo-container. But when I do that, the whole div comes down, as if the #header is not within the normal flow(which I meant by float-break which usually happens when we float elements inside a parent).

Answer 1

Why not just specify a height on the img?

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw" height="60px">

http://jsfiddle.net/HMswX/2/

Otherwise just don't spcify a height on the header..

http://jsfiddle.net/HMswX/3/

---

Based on your update..

The margin isn't working because the div is collapsing.. look at this:

Float the div.. http://jsfiddle.net/HMswX/10/

Apply overflow:auto.. http://jsfiddle.net/HMswX/12/

---

If you want to read more on collapsing divs see this post same issue..

Why does this CSS margin-top style not work?

Answer 2

JoshC has the right answer to your question about why this is happening.

For the desired effect why not simply add a padding to the parent div?

<div id="header" style="background-color:#005387; padding:20px">
            <div id="logo-container">

http://jsfiddle.net/HMswX/13/

This saves you from having to set an explicit height.

Answer 3

Because you have defined in the div with id=header:

height:60px;

Do you want the image to scale down or what is your desired result?

Answer 4

I'm not sure what you mean by float break, but you specify a height in your #header which is smaller than the height of your image. Thus, by default, it will overflow. If you specify overflow:hidden, it will be cut off. Why not remove the height and specify overflow:auto in your #header? Alternative reduce the size of your image by giving it a height, too.

See jsFiddle 1 and jsFiddle 2.