I'm having an issue in Internet Explorer with content adjacent to floated DIVs in our web site. Basically, the navigation menu at the left is floated left, as is the container for the 'content' area - but Internet Explorer expands the first DIV in the content area (in this example, the 'search info' area with the '49 results returned' text and the 'Search again' box inside it) so that its bottom edge is level with the bottom of the navigation menu.
The HTML and CSS are both valid, and I've attached a Tidy-ed version of the HTML with absolute references embedded - so you just need to download it and double-click. The CSS is also attached. A screenshot from Safari showing how it's supposed to look can be seen at this link. Here's the live version of the page.
The same symptoms as I'm having problems with in IE were also visible in Firefox and Safari until I added
overflow: hidden; to each content area box.
The sidebar has these properties:
The container for the 'content' area has these properties. The margin-left of 184px is to get past the navigation bar.
I've used the Clearfix class on the inner DIV of the 'search info' area and each record, but I am assuming that it's not causing this problem as when I remove this class, the problem is still evident.
Many thanks in advance for your help.
It's the width: 100% on
It's the width: 100% on .result_title. You've given the anchor display block and padding & margins which means it's size is greater than 100%. You should really be wrapping those anchors in a heading tag anyway cos that's what they are and apply the background styling to the hx instead of the anchor
Thanks so much for your help - that fixed it!