Contents spilling out in non-IE browsers

Sometimes you will see text or other elements that are placed inside a <div> are  spilling out of its container in non-IE browsers. Internet Explorer, unlike other browsers, IE will expand borders and background colors or images so the content doesn’t spill out of its containing element. If you do not specify “overflow:auto” Mozilla Firefox or browsers other than Internet Explorer will not get the actual height of the content inside as it increases automatically. It will remain at the height specified resulting the content spilling out as it increases dynamically. however, IE gets the actual height of the content and display it properly.

To display contents properly contained inside a specific tag you will need to specify the height or width ( depending on which way you want your content to expand) as auto.

.container
{
height: auto;
min-height: 100px;
}

or

.container
{
overflow: auto;
}

Tags: browser issue, content spilling problem, div not expanding with content, overflow problem

This entry was posted on Saturday, March 14th, 2009 at 11:43 pm and is filed under Common Browser Issues. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.