Grow your CSS skills. Land your dream job.

Adjustable width for browser size

  • # April 21, 2013 at 5:03 pm

    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

    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

    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

    Pretty sure this is impossible without Javascript.

    # April 22, 2013 at 5:18 am

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

    # April 22, 2013 at 6:23 am

    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

    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

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".