Stretching a DIV according to content over page-width

[zweii]

I would like to build a CSS layout where the central div holds images and the div stretches horizontally according to the content width. If it’s wider than the user’s screen, the div should keep stretching and display a horizontal scroll bar which only scrolls this DIV. The rest of the content stays screen width and doesn’t move.

I’ve tried all kinds of things on the containing DIV and on the images itself, but the DIV just won’t stretch automatically.

Simplified example:

some content here















some more content here.

Anyone has an idea how to solve that?
Cheers
peter

[jamygolden]

#main {

height: 550px;

overflow-y: hidden;

overflow-x: scroll;

width: 200px

}

#images (

width: 1000px;

}

[zweii]

Thanks Jamy but that doesn’t help:
– content is not screen width anymore
– images still break to new lines

[jamygolden]

http://jsfiddle.net/jamygolden/ZJJ7B/

[zweii]

ok, you’re a hero! that’s a huge step forward.

would you also know how to automatically stretch the images div depending on how many images are in there? this might vary.

[jamygolden]

Hmmm, this is the best I can do without javascript :p
http://jsfiddle.net/ZJJ7B/1/ – Firefox only

I’ll do one with javascript in about an hour.

[jamygolden]

With JS: http://jsfiddle.net/jamygolden/ZJJ7B/2/

[Author]

Posts