Thread

I have a gallery set up at this link. What I want is four albums displaying on each row, and what happens is, once I have four albums and I add a fifth, it seems to be centered instead of being floated to the left under the first album. Any help would be appreciated! Thanks!

Looks to me like the problem could be that on the first image in the gallery (top left) has four lines of text and the fifth cannot properly nest under it? Just guessing here…

What happens when you add a sixth and seventh?

I started running into similar problems with a gallery I’m working on http://www.kentuckygolfing.com/gallery and had to limit how much caption text was below the image. Feel free to use any code you see there if it will help you.

Thanks for the reply Deron. I added a sixth and a seventh one and the way it lines it up is very odd. Go check it out at the link. I have no clue whats going on with how they are laid out. Any help and guidance would be appreciated.

Hmmmm, I’m not immediately sure what’s going on to be honest with you. I’ve never put a gallery together in this manner. I always use an unordered list. Have you tried using an unordered list? I think it gives you a little better control over everything, but that’s just me.

Here’s the code I’m using for my gallery… maybe it will help you out?

ul#gallery {
list-style: none;
padding-top: 5px;
margin-top: 20px;
}

ul#gallery li {
float: left;
margin: 0 10px 10px 10px;
}

ul#gallery li.galleryOne {
margin-left: 0;
}

ul#gallery li.galleryFour {
margin-right: 0;
}

ul#gallery li img {
border: 4px solid #ddd;
padding: 2px;
height: 130px;
width: 130px;
}

ul#gallery li a:hover img {
background: #ddd;
border-color: #ddd;
}

ul#gallery li p {
text-align: center;
margin-top: 2px;
font-size: 85%;
line-height: normal;
color: #777;
}

ul#gallery li p.gallery-description {
margin-top: 0;
}

.galleryPagination {
clear: left;
padding: 8px;
margin-top: 15px;
background: #eee;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

.galleryPagination b {
border: 1px solid #08689a;
background: #fff;
color: #08689a;
padding: 1px 4px;
}

.galleryPagination a, .galleryPagination a:visited {
color: #08689a;
padding: 0 3px;
font-weight: bold;
text-decoration: none;
}

.galleryPagination a:hover {
text-decoration: underline;
}

<ul id="gallery" class="clearfix">
{exp:weblog:entries weblog="gallery" limit="2" disable="member_data|trackbacks" paginate="bottom"}
<li class="{switch="galleryOne|galleryTwo|galleryThree|galleryFour"}"><a href="{gallery-image}" title="{title}" rel="lightbox">{gallery-image}{gallery-image-name}
{gallery-image-description}</li>
            
{exp:reeposition}
{paginate}
{reeposition:item}
<div class="galleryPagination">
Page {current_page} of {total_pages} {pagination_links}
</div>        
{/reeposition:item}
{/paginate}
{/exp:weblog:entries}
</ul>
{reeposition:put_item}
{/exp:reeposition}

I didn’t look at your code, but I can already tell what’s going on… deronsizemore is right. The height of the divs vary because of content. In oder to have this work, you need to give each .catthumbs div the same predefine height. Putting extra padding or margin is not going to do anything because their height will still vary depending on how many line of content you got in your div.

So you got to figure out how many line of text you can have max in each catthumbs div and give them a height that accommodate for that much text. And watch for IE which will stretch those div’s height because it treats height as min-height

Thanks guys for the help. I have solved the problem. It was adding the height attribute that made it work. Thanks once again.