The problem: I've got disappearing borders around the main content of the website. The right, left and bottom borders show up in FF and Safari but do not show in IE and Chrome. I know that, in chrome and IE, the main div (which has the borders) is not extending to full height (in fact it is just making it pass the header) but if I put a height on it, it will break the template. I know that divs won't wrap around floated elements unless the last floated element in the div has the "clear:both" property, but I have inserted that. Any help would be greatly appreciated. I just want the main div to wrap around everything (other than the footer) in every browser and work fine (not breaking the template)! Usually the clear:both property works but apparently not in this scenario.
Parent elements are never to expand to contain floated elements because floats are removed from the normal flow. I don't have time to look at your site but one of the easiest ways to accomplish what you want is to add 'overflow:auto' to the parent element so it automatically expands with elements that overflow.
It works! Thank you so much! But there is just one problem. When I use that property on the main div, the sidebar gets thrown all the way to the bottom of the page in Chrome and IE. The sidebar is floating left .. I don't see why it can't just behave properly. Any suggestions?
That has to be a sizing / spacing issue... Make sure you've calculated your pixel space correctly and accounted for margins & padding. Hope that helps!! Cheers!~
Hmm .. that doesn't seem to be the case. I've tried making the sidebar significantly thinner and yet it still will not show up where its supposed to.
Blah! this problem is driving me crazy. I am able to get the main div to wrap by using overflow:auto but there is something pushing the sidebar down in Chrome and IE when I do that. I've tried all sorts of crazy combinations with margins and paddings. No luck. Help please!