Table overlaping left div

[Kysmiley]

I have a calendar table that on my Laptop (winxp) looks great in bot IE 6 and FF 1.0. I finally got everything to line up properly and sit just as it should. I went to my in-laws and looked at the site on their PC the table in the right Div is forcing the div to overlap the left colum div, or moving directly under it depending on the content of the table. My site is setup with a header, left and right colum and a footer all within a main container. The main container has a width set to it of 96%. The header inside the main has a width of 100%, the left colum under the header has a width of 17.5% i have no with set for the right colum. The footer has a width set of 100% also and is in the main div section. I have no width setup for the table and it seems to be expanding wider that the right colum is meant to expand. Any one have any idea on how to fix this, and why it is doing so on a pc with teh same version IE as my laptop but not on my laptop with a smaller screen than the PC
Thanks
Pat

[createErrorMsg]

i have no with set for the right colum.

I have no width setup for the table and it seems to be expanding wider that the right colum is meant to expand.

Ky, I suspect the answer lies in the combination of those two comments. With no width on the table, it is probably taking it's width from the size of it's content. Since it is contained in a box which also has no width, that means the content is determining all the widths. I would try explicitly setting the table width and see if that solves it.

Out of curiosity, how have you positioned the left column? Floats? Absolute positioning?

why it is doing so on a pc with teh same version IE as my laptop but not on my laptop with a smaller screen than the PC

Not sure about this one. You say the desktop's screen is bigger, but what about the resolution? Was the browser maxed out on the screen or minimized?

Percentage layouts can do some crazy things when browser windows get resized (one of many reasons I stick with fixed widths).

Also, is it possible your in-laws had the text size set to 'large' or 'largest' on their version of IE? This could have caused the table to expand some (again, since it has no explicit width) and overlap.

cEM

[Kysmiley]

Thanks cEM I will check out today on resolution and other information on PC. As for the code I have pasted it below
########################
#main
{
position: relative;
left: 1.75%;
float: left;
width: 96%;
background-color:
white;
text-align: center;
}
#top {
width: 100%;
height: 210px;
background-color:
white;
background-image:
url(../calendar1/images/tgebkg-top.jpg);
background-repeat:
no-repeat;
margin: auto;
text-align: left;

}
#left
{
float: left;
clear: left;
width: 17.25%;
height: 310px;
text-align: center;
background-color:
white;
background-image:
url(../calendar1/images/tge-sb.jpg);
background-repeat:
no-repeat;
margin: 0%;
}
/*Main content pain (right)*/
#content
{
background-color:
white;
font-family: sans-serif, Arial, cursive;
font-size: 16px;
font-style: italic;
text-align: center;

}/*Bottom cell/div properties */
#bottom {
width: 100%;
height: 97px;
margin: auto;
background-color:
white;
background-image:
url(../calendar1/images/tge-btm.jpg);
background-repeat:
no-repeat; margin: 0%;
text-align: left
}
##############################
I have also set the tables now for a width of 96% so I will see later how it looks now. Thanks again for your reply and great suggestions as always
Pat

[createErrorMsg]

Ky, if your table is inside of #content, you're going to have to make accomodations in it's width for the left column that floats over it.

Picture for a moment a box that is 500px wide. You float a 200px wide sidebar to the left. This is leaves 300px of space in the 500px wide box available for content next to the sidebar. However, remember that this does not mean the unfloated box is only 300px wide. To the contrary, the unfloated box is still 500px wide, it just so happens that line-boxes inside of it will not go underneath the floated sidebar.

Imagine, however, what happens when you set the width of the table to 96%. The browser calculates that as 96% of 500px, or 480px. So the table is now 480px wide, attempting to display in a 300px wide space. This results in 180px of overlap. How that overlap is handled will depend upon the browser. Truth be told, I'm sure what each browser will do, exactly. My guess would be that the float would lay overtop of the table (since a table can't be wrapped), but you can bet that however it's handled it won't be the same between any two browsers.

I would try reducing the table's width to 100% minus the width of the sidebar, and maybe take out and extra 1% just for safety's sake. If the combined width of the table and the floated sidebar equal just shy of 100%, you should be fine.

Please note that I am NOT suggesting you apply that width setting to the #content box. This is a bad idea, as giving a width to a float adjacent box triggers a henious IE6 float bug. However, giving a width to an element inside of that box should not be problematic.

Good luck and let me know how it all works out.

cEM

[Kysmiley]

Thanks cEM, thats what i was thinking on the width but for some reason did not account for the 17.25% of the left in it. I tried with no width and it was tyring to take the whole content container instead of just the right one. I will do that and let you know how it works with just the table set to 80% to be safe to allow for unexpected borders and what not.
Pat

[Kysmiley]

It still looks the same even with the table size set. I just thought of something though, The CSS for this calendar is different that the main one and I dont need to float in it due to the size of the tables and the centering of tables and text. I will remove the floats and set sizes and positioning to see if that helps, the table stay in the right with out overlaping. Thier screen resulution is 800x600, so i am still not sure why on one pc with ie6 it looks bad and on a laptop with the same settings it looks good
Pat