Home‎ > ‎My Notebook‎ > ‎JavaScript Tips‎ > ‎

XBrowser DHTML - Padding vs Margins

DIVs are great things but behave differently in different browsers.

DIV Container - IE Vs FireFox

In IE7 a wider inner content will make the outer container auto-expand.
See in IE7 outer blue box stretches to twice its width to contain the inner pink box.
In FireFox the wider content breaks out of the outer container and overwrite adjacent containers.

 Difference: Container DIVs wont auto-expand in FireFox DIV  

IE7 vs FireFox3
 
<div style="width:50; height:50; background-color:blue;">
  <div style="width:100; height:25; background-color:pink;">
    test text
  </div>
</div>


DIV Borders

 Difference: Borders increase the size in FireFox only 
 
Borders increased the overall DIV size in FireFox.

IE7 vs FireFox3
 
<div style="background-color:red; width:50;">--</div>
<div style="width:50; height:50; background-color:blue;
          border-top:2px solid pink;
          border-bottom:2px solid pink;
          border-left:2px solid pink;
          border-right:2px solid pink">
  test text
</div>
<div style="background-color:red; width:50;">--</div>


DIV Padding

Adding 5px "padding" to the 50x50 blue div.
Again in IE7 the blue div remains 50x50. In FireFox the blue div is now 60x60.

 Difference: Padding increases the size in FireFox only  


 
<div style="background-color:red; width:50;">--</div>
<div style="width:50; height:50; background-color:blue; padding:5px 5px 5px 5px;">
  test text
</div>
<div style="background-color:red; width:50;">--</div>

Padding the outer DIV seems to work the same in both browsers. But not really...
In IE7 the outer DIV expands (stretches) to 60x60 to contain the 50x50 inner DIV.
In FireFox the outer DIV is 60x60 because of the padding. The Inner remains 50x50.


<div style="background-color:red; width:50;">--</div>
<div style="width:50; height:50; background-color:blue; padding:5px 5px 5px 5px;">
  <div style="width:50; height:50; background-color:pink;">
    test text
  </div>
</div>
<div style="background-color:red; width:50;">--</div>
 
Looks what happens when we also pad the inner DIV by 5px.
 
 
<div style="background-color:red; width:50;">--</div>
<div style="width:50; height:50; background-color:blue; padding:5px 5px 5px 5px;">
  <div style="width:50; height:50; background-color:pink; padding:5px 5px 5px 5px;">
    test text
  </div>
</div>
<div style="background-color:red; width:50;">--</div>
 

DIV Margin

Adding a 5px margin is the same in both cases. Both divs increase in size.

So margins are much safer (in some situation that matter).

 Same: Margin increases the size in both IE7 and FireFox 

 
<div style="background-color:red; width:50;">--</div>
<div style="width:50; height:50; background-color:blue; margin:5px 5px 5px 5px;">
  test text
</div>
<div style="background-color:red; width:50;">--</div>

Now applying the margin to inner and outerr div.

The Pink area is 50x50 with the 5px border exposing some container blue.
In IE7 the outer DIV container has auto expanded to 70x70 to acommodate both margins.
But in FireFox it looks like the inner pink div has started left at 10px (2x margins). And the inner div has overwritter the outer div and broken out on the right side.
 

<div style="background-color:red; width:50;">--</div>
<div style="width:50; height:50; background-color:blue; margin:5px 5px 5px 5px;">
  <div style="width:50; height:50; background-color:pink; margin:5px 5px 5px 5px;">
    test text
  </div>
</div>
<div style="background-color:red; width:50;">--</div>
 

Solutions

We need layout to be the same in all browsers.
Take great care when using Padding and Margins and boders. Use a div background color to debug your work.

Vertical spacing

For Vertical spacing use the margin style or if you don't want the size of your DIV container to change,
then use a 1px transparent gif. Use the img Width and Height to control the image size.
Wrap the img tag in a div to change the spacer behavior from INLINE to BLOCK (like a paragraph).
 
<!-- vertical spacer -->
<div><img src="addon/spacer1px.gif" height="5" width="5" border="0"></div>
<!-- vertical spacer -->
 
Above will give you 100% width (100% of its container).You can control the width using a style.width on the div.
 
<!-- vertical spacer -->
<div style="width:5;"><image src="addon/spacer1px.gif" height="5" width="5" border="0"></div>
<!-- vertical spacer -->
 

Height & Width 100%

Take care with using style="height:100%;". IE7 is very forgiving.
Often in Firefox you need to delete this statement all together to get a proper auto-expanding container.
 
Also Width:100% in IE7 -- a inner div will stretch within the margin of the parent. In FireFox the div will stretch way out to the extremes of the parent container. Often simply deleting the Width:100% statement will fix the problem. The other way is to use a couple of nested DIVs -- The inner div can use padding and no Width, while the outer div can use Width=100% or whatever. This gets me over the padding problem mentioned above since the Inner DIV seems to adjust width to the parent (when Width is not used).
 
 <a id=xtlink href="#"><div id="NewsHeader"><div id="NewsHeader_Inner">News</div></div></a>
 
 #NewsHeader {
    margin: 0px 0px 0px 0px;
    color: #323232;
    height:23px;
    width:100%;
    }
  #NewsHeader_Inner {
    font-size: 10pt;
    padding:4px 0px 0px 8px;
   }
Comments