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

CSS

Erik Nuber
Erik Nuber
20,629 Points
Posted by Erik Nuber
Erik Nuber
20,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.

http://jsfiddle.net/kv0blpw8/

3 Answers

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey 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.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

That'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!

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

I 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
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

This 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
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Seriously 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.