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 trialErik Nuber
20,629 PointsTwo 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.
3 Answers
Kevin Kenger
32,834 PointsHey Erik,
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.
Owa Aquino
19,277 PointsI have created a Pen in my codepen.io account. check it out if I correctly understand your problem.
http://codepen.io/owaaquino/pen/OXyeBb
cheers!
Erik Nuber
20,629 PointsThis followed what I asked for but, I did a bad job describing the problem. It made sense to me because I know what I am looking for and you did exactly what I asked which I really appreciate. I need that red box you created to always rest on top of the black boxes right edge no matter how big/small that the black box gets. So the two boxes would overlap.
Erik Nuber
20,629 PointsSeriously appreciate the help. I've been wracking my brain and going thru my code adding and removing divs and changing position types. I'm in the process of writing javaScript for the problem as I think I can do it that way as well.
Erik Nuber
20,629 PointsErik Nuber
20,629 PointsThat's it. I've been trying %'s and having a heck of a time but, you did exactly what I've been trying to figure out. Thank You!