Fix CSS Div incompatibility in Firefox

[Neo]

People often use nested "<div>" tag in their HTML files. If you also want to do such things and hope people have a nice experience in your website using Firefox you should be careful with your CSS style design.

HTML File:

Code: Select all

<div id="container">
    <div id="navigation">
        Home | Directory | Archievs | Photo | About me
    </div>
</div>
 

CSS File:

Code: Select all

#container
{
position: relative;
width: 780px;
border: 1px solid red;
}
#navigation
{
padding: 15px;
width: 100%;
} 
 

You want the "navigation" div lies inside the "container" div and it is fine in IE, but not in Firefox. The inside container div would overflow. Instead, you should modify the width property "width" in "navigation" selector and it should be like this:

Code: Select all

#navigation
{
padding: 15px;
width: auto;
}
 

OR

Code: Select all

#navigation
{
padding: 15px;
}
 

Thus, it works fine both in IE and firefox. Therefore, when there some padding and margin in your nested div, be careful your "width" settings. It should be "auto" to avoid the overflow in Firefox.