They’ll overlap if someone makes the page ridiculously small-- if “small” means a still-popular browser width (600x800, or you have no mobile stylesheet) then yeah, it’s a problem. They have no choice but to overlap, unless you give one of the them (the right one likely) a left margin equal to the width of the other float. What’ll happen at smaller page widths then is the right one will have to drop.
*edit wait a minute, floats would drop anyway, how are you even getting them to overlap??
Another possibility is to float the first one left, and the right one, don’t float it, don’t set a width on it, just set a left margin (can be in %) equal to the width of the left float. That right side will always try to be 100% wide, minus the margin, so it’ll stretch and grow better than a %-width float will.
An example of the latter would just be these forums-- the left column with the poster info isn’t a % width but pretend it is. Meanwhile the right side just grows as needed. Because it can also shrink as needed, it doesn’t drop down below like a float does.
You would still need a min-width. And for IE6, you COULD use a CSS expression, which is basically javascript for IE only in the CSS. It means users with IE6 and security settings or goofy firewalls that block scripts won’t get the min-width, but that’s why you’d set a regular width anyway:
#box {
min-width: whatever;
max-width: whatever;
}
- html #box {
width: the min-width you stated above for those with js off;
width: expression((document.body.clientWidth>thebiggest) ? “maxwidthinpx” : ((document.body.clientWidth>thesmallest) ? “auto” : “minwidthinpx”));
}
It also won’t validate unless you want to stuff it into an IE6-only stylesheet, but I don’t really see the point in that. Non-IE6 browsers won’t even see or parse that.
Paul O’B also has a pure-CSS min-width that works with IE6, but it requires you adding an extra container around the page. If this is more appealing I can try to find it (it might be posted in the tips and tricks thread already, it’s pretty old).