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 Gabriel Ward
Gabriel Ward
20,222 Points

Creating a uniform container for images and text.

I'm trying to create a uniform sized container for a home page on a website. The container will have inside it an image and some text below it. The portrait rectangles on this homepage give an idea of what I'm after http://thewireless.co.nz/

You can see that the containers are a uniform size, and that the images inside them are a uniform size, and there is a title of the article that it links to as well as a caption beneath it.

At the moment I've got 6 containers and the images are a uniform size and the width of each container is the same. However the captions are different lengths and some of them run past the bottom of the container.

Any suggestions would be greatly appreciated.

Here's my code

<div class='image'>
                <img class="feat-img" src="img/taihaperoad.jpg" />
                    <a href='publicationsSubjects.html'><div class='text'></div></a>
                    <h3 class='imageCap'>Publications</h3>
                    <p class='imageCap'>Scans of published works relating to Hawke's Bay</p>
            </div>

.image {

        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-color: #f8f3ef;
    }

.feat-img {
        width: 100%;
        margin: 0 auto;
        height: 185px;
        overflow: hidden;
}

1 Answer

Melissa Wheeler
Melissa Wheeler
6,306 Points
Melissa Wheeler
Melissa Wheeler
6,306 Points

try 

.image p {
   display: inline-block;
   float: left;
}

This should keep the caption from being too big if inline-block doesn't work try just inline. You might also have to mess around with padding and margins to get it just right.

Gabriel Ward
Gabriel Ward
20,222 Points

Hi Melissa, I've just tried your suggestion. It works initially, but as soon as I make the browser size smaller, the h3 and p pop out of the container.

Melissa Wheeler
Melissa Wheeler
6,306 Points

Where you having this display issue with the smaller browser before you made the changes I suggested? If not you can move the above code into a media query that has a min-width of about 700px and then the code will only apply to larger browsers. If you were having this problem with both smaller and larger browsers before making the changes you might be able to use the overflow property 

.image p {
  overflow: ;
}

without seeing the rest of your code and without knowing if you are doing mobile first layout I'm not sure what else you could do.