Creation date:
Overflow of inner block
If you have two containers with display:block and one inside of other then you'll get undisired effects in Internet Explorer, when the parent container is shorter than internal. Look at the code and result:
<html>
<style>
#rss_right{
border: red 4px solid;
display: block;
float:right;
clear:right;
width:25%;
}
#content{
border: blue 3px solid;
padding: 0.5em;
display:block;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="content">
<div id="rss_right">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
</ul>
</div>
<p>Any text</p>
</div>
</body>
</html>
But you won't have this problem in Firefox. You can solve this problem by adding an empty line before the last </div> and assigning it the style with clear:both instruction. Your final code will look like:
<html>
<style>
#rss_right{
border: red 4px solid;
display: block;
float:right;
clear:right;
width:25%;
}
#content{
border: blue 3px solid;
padding: 0.5em;
display:block;
}
.last-line{
clear:both;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="content">
<div id="rss_right">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
</ul>
</div>
<p>Any text</p>
<p class="last-line"> </p>
</div>
</body>
</html>
Added elements are highlighted. Your page in IE will look like:
Note that this solution checked only with "-//W3C//DTD XHTML 1.0 Transitional//EN" Document Type Definition. On "-//W3C//DTD HTML 4.01 Transitional//EN" it doesn't work.Therefore If you encounter the same problem change your DTD to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Author: Jafar N.Aliyev (Jsoft)
Read also
CSS hacks
Nowadays many designers give all measures in pixels, including the font sizes. They fit their site to Internet Explorer and...
Internet Explorer bug with tall block
The problem of IE with two containers. If the internal container is longer than one screen of browser you'll encounter the problem.
© Copyright
All articles in this site are written by Jafar N.Aliyev. Reproducing of any article must be followed by the author name and link to the site of origin(this site). This site also keeps the same rules relative to the articles of other authors.