Question

I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it’s not working how I’d like it to. It adds vertical scroll bars – I assume this is because overflow-x and overflow-y don’t function together.

As far as I’m aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?

Just so there’s no confusion here’s a fiddle to explain a little more: http://jsfiddle.net/kwnQk/

edit
Here is the actual issue I’m having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It’s a shame the overflow function works the way it does because the div’s overflow-x must be hidden, causing the div’s overflow-y to be auto.

edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.

Answer 1

I would think you can just leave the overflow property to visible and just use padding left and right.
Unless you have images, the text should just get wrapped.

For images, you should look at using children divs with width:100%