Forums

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

Home › Forums › CSS › Adjustable width for browser size

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 21, 2013 at 5:03 pm #44285
    mdrd88
    Participant

    Hello, everyone!
    I have a div that needs to adjust its width when the browser is not tall enough to show the whole div. Here’s an example http://codepen.io/anon/pen/ivlHr

    What I need is when you make the browser window shorter, the .post will shrink and then get wider to fit everything. Hopefully I am being clear.

    Thanks in advance!

    April 21, 2013 at 7:45 pm #132653
    SgtLegend
    Member

    You could use a percentage value and `box-sizing` which is supported by IE9+ and all modern browsers, IE8 has some support for it but it is buggy.

    Given that your example doesn’t change and you only have 3 boxes per row the following example will work just fine.
    http://codepen.io/ChrisUpjohn/pen/pJzGn

    April 21, 2013 at 8:08 pm #132658
    mdrd88
    Participant

    Thanks for the advice! However, I need the .post to all be on one line horizontally. and I will probably have more than three in the future.

    April 22, 2013 at 5:13 am #132682
    Paulie_D
    Member

    Pretty sure this is impossible without Javascript.

    April 22, 2013 at 5:18 am #132683
    chrisburton
    Participant

    Wouldn’t this be something for viewport units or am I misunderstanding?

    April 22, 2013 at 6:23 am #132685
    Paulie_D
    Member

    Possibly, but it sounds as though the content must be 100% visible at all times regardless of the width/height of the viewport.

    From what I can gather both of the dimensions must be flexible and I’m not sure that is something that is possible without JS.

    If we assume that the content box is say 80% of the vh (viewport height) [to allow for some padding / margins etc] then the width **could** be flexible but how do you add more horizontal post divs and maintain a flexible width..unless we side-scroll.

    Hmmm…might be interesting.

    April 22, 2013 at 9:28 pm #132790
    mdrd88
    Participant

    Okay, this might help. http://codepen.io/anon/pen/yAgwm

    If you look, the site scrolls horizontally, however, if the browser is too short, you cant see the bottom of the .post. So, the .post needs to get wider in order to accomodate.

    Does that help? Thanks!

    April 23, 2013 at 12:48 am #132800
    Paulie_D
    Member

    We know what you want to to do…what I am saying is that you can’t do this with CSS.

    To size an element either the height or the width has to be fixed and you don’t want to do that.

    The only option, I think, is JS.

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