Forums

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

Home Forums CSS Automatically fit the div to the inner content

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #44763
    Masserra
    Participant

    Hi there!

    I think I haven’t made myself clear with this title. What I would like to discuss here is how could we make a div fit to the inner content being it’s width unknown, and in this case, being all the images different in widths? As you can see in the example bellow they had to make the div’s width fixed/static instead of flexible to the images inside, so in some pages you can continue scrolling horizontally having finished the images…

    Site: http://www.leoneckert.com/p/926f63.html

    Of course accomplishing this with CSS only! :)

    PS: I thought of creating a codepen but as the page is not mine it would be messier than to look it trough inspect element… i think… if not sorry, I’ll do it next time…

    #134991
    Paulie_D
    Member

    `display:inline-block` would probably do the trick.

    http://codepen.io/anon/pen/lrdfn

    #134994
    Masserra
    Participant

    Hm… the thing is… to make the content be displayed like this, horizontally, without wrapping, if the outer div doesn’t have some kind of a width it won’t work, and the content will be wrapped, being it inline-block, block with float left or inline.

    #135000
    Paulie_D
    Member

    >Of course accomplishing this with CSS only

    Then this is out. JS is your friend.

    Frankly, I hate sideways scrolling websites but that’s just me.

    #135016
    CrocoDillon
    Participant

    Have you tried `white-space: nowrap;` on the div?

    [Old demo using nowrap](http://codepen.io/CrocoDillon/pen/ifHza)

    #135025
    Merri
    Participant

    [Oooh look a kitty!](http://www.codepen.io/Merri/pen/KjnFz)

    **Ahem.**

    Yes. Nowrap.

    #135027
    Paulie_D
    Member

    But aren’t you guys still setting a width (or max-width) to the wrapping element?

    He doesn’t want to do that.

    #135028
    Merri
    Participant

    You don’t need to set a width. You’re free to take it away. You can even use something like `margin: 3em;` to reduce the horizontal size of the div without defining a width for it.

    #135071
    Masserra
    Participant

    Hey!! Exactly that! Yes! I’ve tried Nowrap directly on the page and it didn’t work! I guess that I have to start trying these examples separately on a clean sheet, without lots of mixed code! Great! CSS is the shit!! :)

    #135072
    Masserra
    Participant

    What is great in CSS is that nowadays we can accomplish almost anything with CSS, we just have to search trough all our knowledge till the last bit and invent a way! In jQuery/javascript you allways know its possible, in CSS you don’t know but you believe in it and you end up doing it! Haha! :)

    #135075
    CrocoDillon
    Participant

    > I’ve tried Nowrap directly on the page and it didn’t work!

    Yeah you have to use it on the element in which you don’t want the wrapping.

    CSS is the shit! xD

    > But aren’t you guys still setting a width (or max-width) to the wrapping element?

    Only for demo, so I don’t need that many items for the scrolling.

    #135116
    Masserra
    Participant

    Yeah! I did that to the div that had the width size, but I donĀ“t know, maybe I got confused with all the stuff going on there… one of those brain fart moments! :P

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.