2 replies [Last post]
BigRedBall
Offline
newbie
/dev/null
Last seen: 15 years 48 weeks ago
/dev/null
Timezone: GMT+1
Joined: 2006-09-04
Posts: 2
Points: 0

Hi all,
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:

div#sidebar{
background:#e6edf3;
width:184px;
float: left;
}

The container for the 'content' area has these properties. The margin-left of 184px is to get past the navigation bar.

div#wrapper{margin-top: 0;
margin-bottom: 0;
margin-left: 184px;
padding-left: 10px;
width: auto;}

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.

AttachmentSize
clearingfloatproblem.html.txt137.64 KB
style.css_.txt7.15 KB
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

BigRedBall
Offline
newbie
/dev/null
Last seen: 15 years 48 weeks ago
/dev/null
Timezone: GMT+1
Joined: 2006-09-04
Posts: 2
Points: 0

Thanks!

Thanks so much for your help - that fixed it!

Smile