Float with a table inside won't float properly

I have a float right with table inside which isn't floating right...?

[Beau]

OK - another problem that I can't figure or find an asnwer to with a search on here.

I have the following:
CSS:

#popupbox {/*this is the box for containing pop-up product information*/
width: 100%;
margin: 0px 0px 0px 0px;
padding: 10px;
background: #FFFFFF;
color: #000088;
text-align: right;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#centrerightbox { /*this is for inserting content to the right of the pop-up*/
float: right;
margin: 0px 0px 0px 0px;
border: 0px;
padding: 5px;
background: #FFFFFF;
display: block;
text-align: left;
}

table {
table-layout: fixed;
width: 100%;
col-width: 65%;
col-width: 35%;
background: #FFFFFF;
border-collapse:collapse;
}

I've tried fiddling with the table width, reducing the percentage, putting it in pixels etc but whatever I do the pop-up still has blank space to the right of the float.

Any suggestions or pointers to tutorials greatly received.

TIA
Beau

PS. there is a float left as well but I haven't put this in as it floats fine to the left.

[createErrorMsg]

If we can assume the CSS you posted accurately reflects the source order of your <div>s, then the reason #centerbox isn't floating next to #popupbox is that it comes second in the code.

Is this true? If so, you're probably looking at a page where #centerbox sits to the right, but below #popupbox.

The answer, if this is the case, is to switch the order of #centerbox and #popupbox in your source code.

The rule of thumb is this: anything that floats must come BEFORE the thing it floats 'next to' in the source.

If this is not the problem, post us the relevant HTML.

[Beau]

Hi createErrorMsg,

thanks for the response. Sorry I wasn't very clear.

#popupbox contains:
.pictures (which are "float left" and which float left fine) &
#centrerightbox (which is "float right" and does float right fine)

within #centrerightbox there is some text and then a table which should take up 100% of #centrebox but doesn't. This is what is frustrating me!

Re order in the css file it does go
#popupbox
.pictures
#centrerightbox

Should I alter this?

CSS (for .pictures)
.pictures { /*this defines how the product pitures will be displayed*/
float: left;
margin: 0px 0px 0px 0px;
border: 1px solid #002469;
padding: 0px;
background: #FFFFFF;
}

HTML:
<div id="popupbox">
<p></p>
<div class="pictures">
<p><a class="img"><img src="image.jpg" name="image_name" width="260" height="260" border="0" alt="image_description"></a></p>
</div>
<div id="centrerightbox">
<p><H2>Product Heading</H2>
<p><H3>product description</H3>
<br>
<TABLE>
<TR><TD>Product dimensions</TD><TD>Product price</TD></TR>
<TR><TD></TD><TD>Product Code</TD></TR><TR>
<TD></TD><TD><H5><a href="link.htm" onClick="javascript:window.opener.location.href='../contact.htm';window.close()">link text</a></H5></TD></TR>
</TABLE>
<br>
</div>
<div class="clearer">&nbsp;</div>
<H5>
<script language="JavaScript" type="text/javascript">
<!--
if (window.opener) document.write('<strong><a href="#" onclick="self.close();">[close window]');
//-->
</script>
</H5>
</div>

I'm sure it will be a basic error but I'm darned if I can work it out!

Any advice/pointers greatfully received.

TIA
Beau

[createErrorMsg]

I see. Three thoughts...

1) #centerrightbox is floating right, but does not have a width, which it needs to have (all floats need widths).

2) #popupbox contains two floating elements (#pictures and #centerrightbox), but is not itself floating. In order to get a container div to properly enclose floating elements inside of it, the container itself needs to float. So add float:left to #popupbox.

3) If neither of the above work (and even if they do), you might want to consider floating only ONE of those two divs. A float:left and float:right next to each other works fine, but only if you can be sure that you have complete pixel control over the width of the parent container. Otherwise, if a user resizes that container somehow (by resizing the browser, changing resolutions, scaling the layout, etc), making it smaller than the combined width of the floats, the two floats will stack vertically, breaking your layout.

Solutions include either setting an explicit pixel width on the parent div, or floating only one of the child divs, and giving the other a margin equal to the floated div's width.

[Beau]

Thanks createErrorMsg

excellent suggestions particularly no 3. I'll set to work.

Much appreciated,

Beau