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

Posted by Daniel Wagner
Daniel Wagner
13,389 Points

Not sure why my gallery is spilling out of it's containing div

I am working on my first project and I am running into a problem with my div element on the gallery page. The gallery should be inside the div, but the div fails to contain it. The div has a class of "bubbles" and it works fine everywhere else on my site. You can see what I mean here: https://rawgit.com/ducttapeandzipties/project/master/about.html

and you can look at my git repo here:

https://github.com/ducttapeandzipties/project.git

Thank you!

3 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Daniel,

Adding the following to .bubbles will achieve what you're looking for.

/* Credit: http://learnlayout.com/clearfix.html */
.bubbles {
  overflow: auto;
}
Daniel Wagner
Daniel Wagner
13,389 Points

I was rooting around on stack overflow and I saw someone suggest the overflow property. I tried overflow: hidden; and that worked for me. Thank you!

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi Daniel,

Try adding float: left to the .bubbles element. So it will look like:

.bubbles {
    color: #b5b5b7;
    padding: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #677077;
    border-radius: 15px;
    float: left;
}

Hope this helps :)

Daniel Wagner
Daniel Wagner
13,389 Points

I tried this and it works! Thanks!

woodworth
seal-mask
.a{fill-rule:evenodd;}techdegree
woodworth
Front End Web Development Techdegree Student 19,831 Points
woodworth
.a{fill-rule:evenodd;}techdegree
woodworth
Front End Web Development Techdegree Student 19,831 Points

I took a look and think you are having issues because there is no width or max-width set. I like to use percentages myself for these. Like a wrapper div of 90% max-width and 5% to use for margin and padding on each side, giving me 100%.

Also, in you css, your wrapper div is missing a semi-colon so this might be throwing stuff off, too.