[davecom]

Hi everyone,
My Fantasy Amazing Race site written in PHP/MYSQL displays fine on IE and Gecko but is messed up on KHTML:
http://www.kopecsoft.com/far/
As you can see the boxes collide with each other. Any ideas? I'm a very bad CCS developer!

.mcbox{
float: left;
margin-left:20px;
padding:15px;
border: solid #000000 2px;
background-color:#ffff00;
color:#000000;
width:600px;
}
.lastepbox{
margin-left:70%;
padding:15px;
border: solid #000000 2px;
background-color:#9999FF;
color:#000000;
min-width: 300px;
max-width: 300px;
}

[Millennium]

What screen resolution are you using (1024x768, 800x600, etc)? Also, are the windows for each browser you're looking on the same size?

The problem is that you've set the width of the .mcbox to a constant width (600px), but the margin-left of .lastepbox to a variable width (70%). As such, .lastepbox will move around when the window size changes, and if the window becomes too small then it would in fact collide with .mcbox (because you set a margin-left but no margin-right).

If this kind of variable space between the two boxes is what you want, then you're mostly OK. If not, then try setting margin-left on .lastepbox to 700px instead of 70%. You might also try setting margin-right on .mcbox to 20px.

[davecom]

Thanks this was helpful, it's better now. But what if I just wanted to say that the right box should always follow the left box and not overlap it ever? Some way to do this?

[Millennium]

Originally posted by davecom:
Thanks this was helpful, it's better now. But what if I just wanted to say that the right box should always follow the left box and not overlap it ever? Some way to do this?

Hold on; I need to clarify some things. I see several possible situations:

1) mcbox and lastepbox are some constant width (600px and 200px, for example). mcbox is always 20px from the left edge of the window, lastepbox is always 20px from the right edge of the window, and any extra space (depending on the window width). This is what you have now.

2) mcbox and lastepbox are some constant width (600px and 200px, for example). mcbox is always 20px from the left edge of the window, lastepbox is always 20px from the right edge of mcbox, and any extra space (depending on the window width) goes to the right of lastepbox.

3) mcbox and is some variable width, proportional to the size of the screen width (60%, for example). mcbox is always 20px from the left edge of the window, lastepbox is always 20px from the right edge of mcbox, and it's also always 20px away from the right edge of the screen. Any extra space makes lastepbox wider.

4) lastepbox and is some variable width, proportional to the size of the screen width (20%, for example). mcbox is always 20px from the left edge of the window, lastepbox is always 20px from the right edge of mcbox, and it's also always 20px away from the right edge of the screen. Any extra space makes mcbox wider.

5) mcbox and lastepbox are some constant width (600px and 200px, for example). mcbox is always 20px from the left edge of the window, lastepbox is always 20px from the right edge of the window, and any extra space (depending on the window width). However, there should never be less than 20px between mcbox and lastepbox.

As far as I could tell, any one of these four situations could be what you're going for. 1 is what you have now. I personally recommend either 2 or 4, but we can work with any of the others if that's what you want. The question is: which one do you want, or do you want something different?

[davecom]

I agree with you, I think #4 would make the most sense. Before I was referring to some sort of CSS characteristic that stops boxes from overlapping - doesn't such a thing exist?

[Millennium]

Originally posted by davecom:
I agree with you, I think #4 would make the most sense. Before I was referring to some sort of CSS characteristic that stops boxes from overlapping - doesn't such a thing exist?

Ordinarily, float should stop boxes from overlapping. If the screen is too small for boxes to fit side by side, then the non-floated one should be moved so that it is under the floated one.

Are you sure that they're actually overlapping, and not just butting right up against each other?

[davecom]

Definite overlappage, but then again the lastepbox is not set to float. Perhaps it should? And if so - left or right?