Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Erik Nuber20,629 Points
Two divs, one that grows and shrinks using % other stays the same Problem.
My code is rather elaborate at this point so rather than share, I would like to massively simplify the problem...
I have a div, imagine it is a square, it is set to a percentage value so that it will grow and shrink as the browser window grows and shrinks. It's overflow value is set to hidden.
I have a second div that is a small square that I want attached always to the right side of the div above. It doesn't grow and shrink, it just sticks to the side.
I have been fiddling around with this for several days. I keep coming back to it when I think of something else that might work.
My best option I've come up with is to create a keyframe animation that grows the first div and moves the second div along but, it breaks to easily. It also doesn't give nearly the same look as using relative values.
Any help/suggestions would be great as I am stumped.
I found this jsfiddle that is simple enough that it is a good working point. I've been playing with it myself trying to figure out how to make it work.
Kevin Kenger32,834 Points
I'm not sure what exactly the problem is, but I know that setting the height property's value to a percentage can get tricky. If you want it to get thinner as the browser window gets thinner, and shorter as the browser window gets shorter, using percentages will work as long as the box's parent is the body element, and the body has a percentage height.
If you want the box to stay in proportion to itself, and get thinner and shorter as the browser window gets thinner, I would say using
vw is your best option.
I set up a pen to demonstrate what I mean.
Erik Nuber20,629 Points