Width of container with overflow

[sgietz]

OK, this is driving me bonkers.

I have a div that I want to scroll when the content exceeds a given height. Problem is that IE adds the scrollbars to the outside, making the div wider than specified, whereas FireFox adds the bars inside the div, which retains the given width.

Of course what happens in IE is that, when scrollbars appear, the div wraps to the next line ... ARGHHHHHHH!

I don't want to employ messy JavaScript and the likes. Is there a simple, elegant solution to this problem?

Thanks :o)

[kunwarbs]

what css properties are you using in DIV tag to handle this?

try adding "overflow:scroll" attribute to div tag

<div style="overflow:scroll">

[sgietz]

I'm using "auto" as the value. Even with the value set to scroll the problem remains. My only option is to resize the div to accommodate IE, but then, in FireFox, the div will be short. It works, but not very elegant.

Well, I'm thinking as I type this ... I will try to put another div inside of this one (it's a floating one) and set that one to 100%.

I'll post the results.

Thanks for the reply :o)

[sgietz]

Well, nope ... that doesn't work either. Here's some of my code:

<div style="background:#333;float:left;width:303px;">
<div style="height:350px;overflow:auto;width=100%;">
Content
Content
Content
</div>
</div>

There is enough content for the div to always scroll vertically. That's the desired effect. The 303px is the correct size for IE. FireFox works with 325px, but then IE will wrap to the next line.

I'm guessing JavaScript is the only way?

Thanks!