Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Julia Conlan
Julia Conlan
10,189 Points

Creating own website. How can I get floated un-ordered list gallery items to be the same height/size.

file:///Users/JuliaConlan/Desktop/Group%20Excercise/index.html HTML <section>

    <ul class="gallery"> 

<li>

<a href="services.html">
    <img src="img/personaltraining.jpg" title="Personal Training" alt="personal training">
    <p>Personal Training</p>
</a>
</li>

<li>

<a href="services.html">
    <img src="img/groupex.jpg" title="Group Exercise" alt="grouped">
    <p>Group Exercise</p>
</a>
</li>

</ul> </section>

CSS

.gallery { margin: 0; padding: 0; list-style: none; }

.gallery li { /* Photos */ display: padding: 5px; float: left; width: 45%; margin: 2.5%; border: 1px solid #ccc;

}

.gallery li a p{ /* Caption Styles */ margin: 0; padding: 5%; font-size: 1.75em; color:#bdc3c7; }

1 Answer

Wilson Usman
Wilson Usman
35,206 Points

I didn't want to repeat something that's already out there. Here's the answer found on stackoverflow:

Declare the a element as display: inline-block and drop the width and height from the li element.

Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.

The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.

Use line-height to control the text's Y-position inside the element.

Hope this helps

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .gallery { 
            margin: 0; 
            padding: 0; 
            list-style: none; 
        }
        .gallery li { /* Photos */ 
            display: block;
            padding: 5px; 
            margin: 2.5%; 
            float: left;
            border: 1px solid #ccc;
        }
        .gallery li a { /* Caption Styles */ 
            display:block;
            line-height: 50px;
        }        
        .gallery li a p{ /* Caption Styles */ 
            margin: 0; 
            padding: 5%; 
            font-size: 1.75em; 
            color:#bdc3c7; 
        }
    </style>
</head>
<body>
<section>
    <ul class="gallery"> 
        <li>
            <a href="services.html">
                <img src="img/personaltraining.jpg" title="Personal Training" alt="personal training">
                <p>Personal Training</p>
            </a>
        </li>
        <li>
            <a href="services.html">
                <img src="img/groupex.jpg" title="Group Exercise" alt="grouped">
                <p>Group Exercise</p>
            </a>
        </li>
    </ul> 
</section>


</body>
</html>