I have two floating DIVs.
It is fine in Firefox and IE7, but in IE6 there is white space below them.
There shouldn’t be a gap above the bottom blue line.
Hi,
It will take a while for you image to be approved, even then it will not help us since we can’t debug images.
Please post a link to the page or post a test case of the code (css & html) and then we can see what is going on. 
If the page is fine in IE7 then it may be an expanding box problem with IE6, hard to say until we see some code.
the html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Website</title>
<link rel="stylesheet" href="drv.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
div#leftbox
{
width:365px;
}
div#rightbox
{
width:435px;
}
div#leftbox h3
{
margin-top:200px;
color:#076cb0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="theater.html">Theater</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="film.html">Film</a></li>
<li><a href="press.html">Press</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="news.html">News</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="leftbox">
<h3>Click on and enjoy ...</h3>
</div>
<div id="rightbox">
<p><img src="photo.jpg" width="435" height="510" alt="" /></p>
<p id="myspacelogo"><a href="http://www.myspace.com"><img src="myspace_logo.jpg" width="89" height="30" alt="Myspace logo" /></a></p>
</div>
</div> <!-- content -->
<div id="footer">
<p>©2010</p>
</div>
</div> <!-- container -->
</body>
</html>
the css file
*
{
margin:0;
padding:0;
}
body
{
font-family:Verdana,Geneva,sans-serif;
background:#ffffff;
color:black;
font-size:12px;
}
h3
{
font-size:20px;
color:#999999;
}
h4
{
font-size:16px;
}
div#container
{
margin-left:auto;
margin-right:auto;
width:800px;
text-align:center;
}
div#nav
{
border-top:3px #000000 solid;
text-align:right;
border-bottom:1px #007fd4 solid;
}
div#nav li
{
list-style-type:none;
display:inline;
margin-left:10px;
}
div#nav ul
{
padding:5px 0;
}
div#nav a
{
font-size:13px;
font-weight:bold;
text-decoration:none;
letter-spacing:1px;
color:#000000;
}
div#nav a:hover
{
color:#007fd4;
}
div#leftbox
{
height:510px;
float:left;
text-align:left;
}
div#leftbox div#text1
{
margin-top:15px;
width: 330px;
height: 440px;
overflow: auto;
color:#1c1c1c;
}
div#leftbox div#text1 p
{
margin-bottom:6px;
}
div#rightbox
{
float:left;
height:510px;
text-align:right;
}
div#rightbox p#myspacelogo
{
position:relative;
text-align:right;
top:-481px;
}
div#footer
{
clear:both;
padding-top:10px;
font-size:10px;
border-top:3px #007fd4 solid;
}
I have a feeling that the relative positioning of the Myspace logo gif file is causing the white space.
I am not sure what is the best way to move it to the top right corner without using relative positioning.
Any pointers greatly appreciated.
Hi,
Yes, IE6 was stretching the div#rightbox due to it’s expanding box bug.
I would absolute position (AP) the p#myspacelogo over the other image and that will eliminate any problems with relative positioning (RP).
RP elements preserve their original space in the document and the box is only moved visually. That is why IE6 was showing the space below along with the expanding box bug.
Try this instead -
[B]div#rightbox[/B]
{
float:left;
height:510px;
text-align:right;
[COLOR=Blue]overflow:hidden;[/COLOR][COLOR=DarkGreen]/* stop IE6 from expanding box*/[/COLOR]
[COLOR=Blue]position:relative;[/COLOR][COLOR=DarkGreen]/*establish containing block for AP #myspacelogo */
}[/COLOR]
[B]div#rightbox p#myspacelogo [/B]
{
[COLOR=Blue]position:absolute;
top:0;right:0;[/COLOR]
}
Can you explain further why
position:relative;/*establish containing block for AP #myspacelogo */
is needed?
Hi,
As the comment in the css says, the position:relative; was so that div#rightbox would become the containing block for AP children. That way the AP children will position from the div#rightbox div since it is the nearest positioned ancestor.
You can learn more about positioning and containing blocks here in the SitePoint Reference.
Ah
If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative. The containing block is formed by the padding edge of that ancestor.
is the relevant passage that applies to my case?
If you have a position:absolute element, it will wonder “where should I be?”
It will look for the nearest parent that has a position on it. Absolute/relative ETC!
IF one isn’t found then it uses the viewport (<html>)
Normally the closer parent you have a position on (for absolute elements) the better. More consistant results to what you want.
So to answer your question-yes. I just wanted to explain it myself
Thank you! 
You’re welcome :). Glad to help.