-1

In HTML 5 with doctype , I have inside body:

<div style="width:100%; background-color: #cccccc;">
    <div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
    Main
</div>

http://jsfiddle.net/F3kXw/

When I render in firefox, I getting outer div have margin 20px from top of page, what I need only sub div have margin 20px from the outer div. It works if I put character on top of sub div like: 

<div style="width:100%; background-color: #cccccc;">
    Main
    <div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
    Main
</div>

e.g. http://jsfiddle.net/F3kXw/2/

It makes no sense to me, I never have had this problem in the past.

Kunj
  • 1,980
  • 2
  • 22
  • 34
user3255828
  • 31
  • 1
  • 4
  • 1
    Searching for that exact title gave me the wanted answer in google, it was a previous [question here in SO](http://stackoverflow.com/q/20689575/938236). That lead me to the original. – Francisco Presencia Jan 31 '14 at 03:40
  • I just answered this yesterday. http://stackoverflow.com/a/21450924/2388219 – Ming Jan 31 '14 at 03:43
  • Are you using a CSS reset? If not, I recommend http://meyerweb.com/eric/tools/css/reset/. This makes a huge difference in avoiding pixel differences among browsers. – Victoria Ruiz Jan 31 '14 at 03:49
  • Is this what you're after http://jsfiddle.net/j08691/F3kXw/5/? – j08691 Jan 31 '14 at 04:03

4 Answers4

1

Try this code maybe can help

<div class="website_sub_frame" style="width:100%; background-color: #cccccc;overflow:hidden">

    <div style="clear:both; margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
    Main
</div>
Vuthy Sok
  • 720
  • 3
  • 10
  • 22
1

Instead of using margin top why don't you add another div above your sub div and give it a height of say 20px. eg: div class="website_sub_frame" style="width:100%; background-color: #cccccc;" div style="height:30px">Sub /div Main /div

Pinasis
  • 33
  • 7
0

Try to give margin-bottom instead margin-top to child div. That's it.

<div class="website_sub_frame" style="width:100%; background-color: #cccccc;">
    <div style="width:100px; background-color: #aa0000; margin-bottom:20px;">Sub</div>
    Main
</div>

Here is a working demo

OR you are looking for this?

<div class="website_sub_frame" style="width:100%; background-color: #cccccc;">
    Main
    <div style="width:100px; background-color: #aa0000; margin-top:20px;">Sub</div>
</div>

Here is a working demo

Hope it helps you!

immayankmodi
  • 8,210
  • 9
  • 38
  • 55
0

Make the parent DIV float. Not exactly sure why that fixes it, but it works.

 <div style="float:left; width:100%; background-color: #cccccc;">
   <div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
   Main
</div>
Cake
  • 751
  • 1
  • 9
  • 19