Bug? Floating DIV + Text-Align = Weird IE hor-scroll bar?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:23

Bug? Floating DIV + Text-Align = Weird IE hor-scroll bar?

Poster: vikenk
Dated: Thursday December 1 2005 - 18:45:38 GMT

Hello all,

I found some weird behavior in IE with floating elements and the text-align css command. First, the link where you can see this:

http://www.sayatnova.com/milonic/home_mil.htm

You can see my css at the bottom of this post.

I have a Container DIV with two Divs inside it. I noticed that merely putting the menu at the top of the page suddenly creates a horizontal scroll bar, even though all the contents fit inside the page. This happens only in IE, not in FireFox or Opera.

I narrowed down the problem to something in the CSS file. The Container DIV employs negative margins in it's design (see http://www.alistapart.com/articles/negativemargins/). I thought the problem might be with the negative margin, so I removed the margin, but that made no difference. The scroll bar is still there.

The Container DIV is also floated (float: left, in this case). When I remove the float the scroll bar *disappears*. Simple, right? Unfortunately. That leaves me with an improperly aligned Container because the body is text-aligned center. See: http://www.sayatnova.com/milonic/home_mil_1.htm

So I remove the center alignment and float the DIV back to the left. Scroll bar is GONE. See: http://www.sayatnova.com/milonic/home_mil_2.htm. When I add the text align back in, the scroll bar *reappears*. So...

...When I use body { text-align: center } with #container { float: left } I get a horizontal scroll bar in IE.

The interesting thing is that if I use text-align: left, there's *no problem*. It's only when I use text-align: center or text-align: right with the floating DIV that the horizontal scroll bar appears.

Maybe it's a bug that hasn't been discovered? Has anyone reported this type of thing before? Just thought I'd ket everyone know. Maybe someone knows a fix for it?

Here's the portion of CSS that I'm talking about:

.home {
text-align: center;
margin-top: 60px;
}

#container {
width: 99.5%;
float: left;
margin-right: -170px;
border: solid 2px white;
padding: 0;
}

#sidebar {
width: 170px;
float: right;
background: black;
text-align: center;
padding: 5px;
text-align: center;
}

#content {
background: #ff9900;
margin-right: 180px;
text-align: center;
border-right: solid 1px white;
padding: 0 0 1px 0;
}

Thanks for any replies or input! I thought I'd let everyone know about what may be a potential bug (even if it's in IE).

--
Viken K.
http://home.comcast.net/~vikenk
http://www.sayatnova.com

Poster: vikenk
Dated: Thursday December 1 2005 - 18:54:00 GMT

Sorry, need to fix the second link. It has a period at the end that's screwing it up.

http://www.sayatnova.com/milonic/home_mil_2.htm

By the way, now that I read my post, I realize that it's not clear enough that this horizontal scroll bar happens *only* when I insert the Milonic menu. No menu...no problem.

--
Viken K.
http://home.comcast.net/~vikenk
http://www.sayatnova.com

Poster: Andy
Dated: Wednesday December 7 2005 - 12:50:14 GMT

This looks OK now - did you manage to fix it?

Poster: vikenk
Dated: Wednesday December 7 2005 - 13:50:54 GMT

Sorry Andy, I haven't found a fix. The link you refer to is a good working sample because there's no "text-align:center". I notice that this seems to happen regularly. Other times when I've inserted the menu into a document with "text-align: center" in the <body> I've noticed that scroll bar there.

Not sure if it has to do with margins or padding, but it doesn't seem so. An educated guess is that it's probably some weird combination of CSS commands that's doing it.

Viken K.

Industrial Strength JavaScript and DHTML Menus

Bug? Floating DIV + Text-Align = Weird IE hor-scroll bar?