- This topic is empty.
April 21, 2013 at 5:03 pm #44285
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 #132653SgtLegendMember
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/pJzGnApril 21, 2013 at 8:08 pm #132658
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
Wouldn’t this be something for viewport units or am I misunderstanding?April 22, 2013 at 6:23 am #132685
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
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
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.
- The forum ‘CSS’ is closed to new topics and replies.