Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Stretching a DIV according to content over page-width

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #33663
    zweii
    Member

    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

    #84046
    jamygolden
    Member
    #main {
    height: 550px;
    overflow-y: hidden;
    overflow-x: scroll;
    width: 200px
    }
    #images (
    width: 1000px;
    }
    #84104
    zweii
    Member

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

    #84105
    jamygolden
    Member
    #84109
    zweii
    Member

    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.

    #84113
    jamygolden
    Member

    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.

    #84121
    jamygolden
    Member
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.