1

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

Ivin
  • 4,435
  • 8
  • 46
  • 65
  • 1
    Keep in mind that email clients do a relatively poor job of parsing HTML, so being conservative in your markup and styling is important. For this reason, make sure your image is sized to the desired dimensions and make sure to add `height` and `width` attributes to the `img` tag instead of relying on any height or width values from the parent containers. Avoid any layouts that depend on floats or absolute positioning. If you have to, use table tags. Using tables to format layouts for email messages is perfectly acceptable. – Marc Audet Sep 19 '13 at 20:32

4 Answers4

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.

Meximize
  • 70
  • 3
1

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?

  • If I use an image that is less than 60px will it work? Im still not able to give margin-top to #logo-container div. It gets applied to whole div. – Ivin Sep 19 '13 at 20:15
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?

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 1
    This was my immediate thought. – Dakotah Hicock Sep 19 '13 at 20:07
  • Thanks. Im curious to know why this is happening. A margin-top should have taken effect within its immediate parent, but here its not the case. I wonder why it is so! – Ivin Sep 19 '13 at 20:18
  • 1
    @goose I updated it again.. the margins weren't working because the div was collapsing. – Josh Crozier Sep 19 '13 at 20:23
  • Looks like you have added float:left and it seems to have worked. Any idea how it fixed that collapse? Usually floating causes collapse, right? – Ivin Sep 19 '13 at 20:26
  • @goose I updated it once again. I provided a post on collapsing `divs` – Josh Crozier Sep 19 '13 at 20:26
  • Splendid explanation! So vertical margin collapsing bug is the culprit here. Thanks a bunch Josh. Upvoting that post and your answer! – Ivin Sep 19 '13 at 20:34
1

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.

chopper
  • 6,649
  • 7
  • 36
  • 53
  • The image I added for example was taller than the parent #header which was accidental. Even if I put small image it doesnt behave normally. Im dont think giving overflow:auto will solve this the right way. Ideally it should work without overflow property provided that I give an image which is not overflowing. – Ivin Sep 19 '13 at 20:13
  • http://jsfiddle.net/HMswX/8/ In this fiddle, the margin-top is applied to #log-container and it should have taken effect within its immediate parent #header. But it has gone out of the normal flow and causing the whole div to come down by 20px. – Ivin Sep 19 '13 at 20:20
  • Specify `position: absolute`. See [this jsFiddle](http://jsfiddle.net/chopper/HMswX/11/) – chopper Sep 19 '13 at 20:29