I’ve recently updated a website that I’m working on to add a second column to the main content. I’ve called this div “sidebar”. I’ve put an image and some text in this div. The div “sidebar” has been floated right. The div “maintext” has been floated left. The floats has been cleared, with a group class. Despite this the div “sidebar” escapes it’s containing div (“container”) in Firefox 9.01 on Windows Vista. The layout breaks completely in Internet Explorer 7 on Windows Vista with the “maintext” div dropping down below the “sidebar” div. There is no problem in Firefox on Linux Mint 12. (apart from the div “nav” not extending to the whole width of “container”.)
My aim is to get the divs “pageheader”, “nav” and “sidebar” to align on the right.
Hi Ben, we really need to see this live to be able to respond accurately, as we can then see what’s going on. Make sure to leave some space between the left and right columns, as some browsers calculate widths differently.
Do you have a link to the page so we can see what’s happening? If not, please post the HTML and CSS for that page. It’s a bit difficult to diagnose the problem without seeing your code.
Yes, the widths of the two floated divs add up exactly to the width of the container (in ems) but you can’t rely on every browser resolving those widths to the same number of pixels, so you need to leave some breathing space. Reduce the widths on the floats a bit and you won’t get the float drop problem. (They are too close together anyway.)
