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

HTML

Posted by Chas Elterman
Chas Elterman
2,557 Points

Trouble making gallery on my site lay out properly and weird div behavior.

(Preface) I am super new to making websites and this is my first go, sorry if this is incredibly simple!

I'm trying to make several pages on my website that feature galleries of images. This one in particular would show, let's say, images 1, 2, and 3. Once you clicked one of those images you would go to their respective galleries (1a, 1b, 1c, etc.). So far, I have been having a lot of trouble just getting the gallery to lay out correctly. I haven't been able to center it or size things properly.

Here's a link to my code (I hope) http://codepen.io/chaselterman/pen/ORAJEW (Also not sure if it will make sense without pictures there?)

One thing I have found weird is that the div with the class "wrapper-three" doesn't seem to be filling up the area of the nested div "gallery-three." I have already made a home page to my site where I use pretty much the same exact code but the div behaves like I'd expect it to.

If anyone has any answers or any suggestions as to what I could/should do differently I would love to hear them.

Thank you!

Pirvan Marian
Pirvan Marian
14,609 Points

Remember, when you float elements that are contained by another element ( the so called parent element ) you have to clear the floats of the parent element because of the floated child elements, its height will collapse.There is a trick called clearfix, take a look below

<div class="parent">
    <div class="child1">1</div>
    <div class="child2">2</div>
    <div class="child3">3</div>
</div>

.parent .child {
    float: left;
}

/* cleafix */
.parent:after {
    display: block;
    content: "";
    clear: both;
}

Reasearch more about this method and you will know how it works.

More than this, I believe that the navigation area is not at the right plase.Becase you have there the h2 element, the entire width of the parent container is taken because h2 is a block level element, so the navigation area is pushed down because there is no more space on that place.Make the h2 an inline-block level elements and everything will be ok.

You have to define a width for your gallery-three class.I see that you have 3 columns there, define a width of 33.33% ( using the calc() function, width: calc(100% / 3); it makes things easy ) for each of them and remove the margin ( or find a way to add some margin, you can do it, just some math there ).

Chas Elterman
Chas Elterman
2,557 Points

Thank you, Pirvan! That fixed my nav issue and cleared up some of the issues going on with the gallery. Another thing I am noticing is that the footer is taking up all of the space "wrapper-three" should be taking. Wrapper-three has a width but not a height, even thought there are elements inside of it, but they just seem to be overlapping the footer (or vice versa).

Any ideas on that?

And again, thank you for your help!