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 CSS Foundations The Box Model Positioning Properties

Posted by Tom Williams
Tom Williams
7,473 Points

horizontal overflow of elements

Hoping that anyone can help. In this exercise there are three divs and using css we made the divs look like squares with rounded edges. We then changed the positioning of the three divs to their parent container element .wrapper. I was successful in doing that and I was able to get similar results to the exercise files, so I was feeling pretty good. Until, I re-sized the viewport horizontally, cue scary music and feelings of catastrophic failure creeping in. When I re-size the viewport the three individual divs will overflow out of their containers background color. Then I checked with the exercise files and the same thing occurred. So my question is how does one prevent this from occurring?

2 Answers

Shamime Boodhoo
Shamime Boodhoo
19,054 Points
Shamime Boodhoo
Shamime Boodhoo
19,054 Points

You could try adding overflow-x: hidden; to the divs.

Tom Williams
Tom Williams
7,473 Points
Tom Williams
Tom Williams
7,473 Points

Shamime thanks for the response I tried that this morning and you are absolutely correct it that does work. I didn't really convey what I was attempting to state correctly I was trying to keep the distance between the elements and the right and left sides of the parent div the same so it would not change to a state of overflow. Changing the space is fine for fluid design but when it reaches x amount of space I want it to stay the same. I then thought that would be an issue with the margin. But no matter what I have tried I cant get that result.