Bottom Scrollbar Bug

Fixed, but with a hack, can anyone explain why the problem occurs?

[fishfinger]

HTML 4.01 Transitional / html4/loose.dtd

Problem occurs in Firefox, IE(7) and Safari (for PC).

Simplified code from a two column layout.

<div id="container">
<div id="navholder"> NAVIGATION </div>
<div id="main"> CONTENT, then...
<div id="1"> LEFT BOX ON ONE LINE </div>
<div id="2"> MIDDLE BOX ON ONE LINE </div>
<div id="3"> RIGHT BOX ON ONE LINE </div>
</div>
</div>
<div id="bottom"> BOTTOM 'BANNER' </div>

CSS (again, simplified) :

#container { text-align: left; width:990px; margin: 0 auto;
}
#navholder { float: left; width: 200px; margin-left:10px;
}
#main { float: right; text-align:left; margin-right:4px; width:768px;
}
#1,2,3 { width:250px; float:left; margin-right:5px;
}
#bottom { background-image:url(); background-repeat:repeat; clear:both;
}

I isolated a problem caused by the third div (3) as follows -
(a) I get a horizontal scrollbar at the bottom of my screen, and
(b) the background image in #bottom doesn't stretch to fit.

I've managed to fix this by killing the bottom scrollbar with 'overflow-x: hidden;' in the body CSS style. This does mean that the few people still using 800x600 won't be able to scroll to see the content.

I tried putting the #1,#2,#3 in their own containing div but that didn't help.

Any idea why a third div within the #main area woudl cause this?

[swa66]

I'm pretty sure a numeric id isn't fully legal.

Even if it were, your selector

#1,2,3

should be

#1, #2, #3

The far easier solution is to get rid of those individual ids, (there's really no need)

<div id="main"> CONTENT, then...
 <div> LEFT BOX ON ONE LINE </div>
 <div> MIDDLE BOX ON ONE LINE </div>
 <div> RIGHT BOX ON ONE LINE </div>
</div> 

in CSS:

#main>div {
 width:250px;
 float:left;
 margin-right:5px;
} 

IE6 won't do the direct child selector, if you have no other divs inside those divs, you can use "#main div" instead, or teach it support for the selector by adding IE7.js

[swa66]

To stretch your main div, since the 3 columns are floated: add in the html after the 3 floated divs and before the end of the main div a <br class="clear">
and in the CSS:

.clear {
  clear: both;
}

or search for clearfix (but be careful what you find as it often contains hacks, so make sure you fully nderstand how it works.

[fishfinger]

@swa66 - thanks for your replies.

numeric id isn't fully legal.

Sorry for confusion, they're not named with numbers, they're called by the names of the services profiled in the boxes, I just tried to strip the code down as far as possible. By '#1,2,3' I meant that there are three different divs each with the same code. They are named separately so I can have different bg images in them should I want.

I do have other divs inside the #main div on other pages.

I've also already tried the <br class="clear"> fix and that didn't sort it.

From the way it displays, it seems to me that the browser is thinking that it only needs to show the #bottom div 990px wide and this is because of the third div floated in the #main area.

There is clearly something in my code that's wrong because all 3 browsers are rendering exactly the same.

I'll read up on clearfix. If I draw a blank after that may I PM you a link to the page in question?

[fishfinger]

Having read up on clearfix, I found that adding just 'overflow: hidden;' to the #main div fixes the problem, and people in 800x600 will still get the scrollbars if needed. Obviously still a hack, but I think playing around with the margin settings for either the 3 floated divs or the #main one will fix this properly.