How can I force IE to keep the div in its place (i.e. don't break it if there isn't enough room).
I've tried using overflow:hidden, but it doesn't seem to work.
BTW, the page is www.pedropais.com and the problem is with the right sidebar. If you reduce the window you'll notice that the sidebar goes to the bottom of the page. That doesn't happen with FF.
IE (6and below) has a seriously broken box model. You MUST be careful when defining widths with margins and padding. There are some layout methods that will stop IE from dropping your content.
You are also running into the doubled-float margin bug which is triggered when you have a box floated left or right, and then add padding or margin in the same direction as the float: ie. float: left and margin-left and the same for right. http://www.positioniseverything.net/...ed-margin.html
I glanced at your code briefly. Two things I see:
#content is set to 500px width + 4% padding (2+2)
#sidebar is set to 380px width.
At the very minimum, you've got a width for the 2 of them of 880px (w/o padding). If you shrink your browser window to less than that, there's no place for that 380px column to go, and that's not even counting the extra 2% you've added to each side of content.
You're absolutely right. But even though the site might not fit a 800x600 resolution screen I wanted it not to drop the right sidebar. It should just show an horizontal scrollbar and nothing else.
Is that so difficult to accomplish?
Read here for a solution: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15
You just have to put the hack in a separate CSS file for Ie fixes and use conditional comments in your html to call the 'iefixes' css file, otherwise it will blow up in your face in IE 7.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
