css center repeating floating thumbnails in liquid layout

**learning_brain** · 10-20-2011 02:56 PM

I have tried everything here with little success.

I'm trying to center a bunch of float-left thumbnails in a liquid layout.

The thumbnail + span description underneath - all wrapped in a link. HTML as below.

Code:

<body><div id="wrapper">
<div class="thumbscontainer">
loop repeat....
<a class="thumbnail" href="..whatever">
<img src="..whatever">
<span>
Description
</span>
</a>
...end loop
</div>
</div>
</body>

My current css (stripped down) is..

Code:

html{
    width: 100%;
}
body{
    margin: 0px;
    width: 100%;
}
#wrapper{
    width: 98%;
    padding: 10px;
    text-align:center;
}
.thumbscontainer{
    display:inline-block;
    position:relative;
    width:inherit;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}
a.thumbnail{
    position:relative;
    float: left;
    text-align:center;
    height: 80px;
    width: 110px;
    margin: 0px 5px 5px 0px;
    padding: 10px;
    border: 1px outset #fff;
}
a.thumbnail img{
      height:78px;
      width:111px;
}

This would be relatively simple with a fixed width layout but I want to keep it liquid.

Any ideas?

**misson** · 10-20-2011 04:46 PM

Setting the width of .thumbscontainer to "inherit" defeats the purpose of auto-margins for centering. One option is to try removing that.

Since you're already making use of "inline-block" (which has poor-to-no support in older browsers), another option is to give a.thumbnail inline-block display, rather than floating them.

**LostHorizon** · 10-22-2011 01:43 PM

Hi "learning_brain",

First, "misson" is RIGHT that you should remove line #16 "width: inherit;" in your CSS "thumbscontainer" class since this will assign the same width to the "thumbscontainer"-class DIV container as its parent DIV container (id = "wrapper")'s width, hence the result is NO CENTERING in opposing to what you would have wanted. Also, you may want to remove line #14 "display: inline-block;" too as this would have become redundant,

Code:

 1     html{
 2         width: 100%;
 3     }
 4     body{
 5         margin: 0px;
 6         width: 100%;
 7     }
 8     #wrapper{
 9         width: 98%;
10         padding: 10px;
11         text-align:center;
12     }
13     .thumbscontainer{
14         display:inline-block;
15         position:relative;
16         width:inherit;
17         margin-left: auto;
18         margin-right: auto;
19         text-align:center;
20     }

Second, whenever you want to center a block element, you'll need to explicitly specify its width, and the specified width has to be smaller/less than that of its parent (otherwise, by default, it will inherit its width from its parent container),
Third, since you're using "text-align: center;" on line #11, there's really NO NEED for you to set the "thumbscontainer"-class DIV container's left and right margins to "auto" on lines #17 and #18 as these would have become redundant too.

****************************************
To SUM up, to FIX your problem, you'll need to remove lines #14 and #16 (removing lines #17 and #18 is optional), and add CSS codes to specify the width (< #wrapper's width) for the "thumbscontainer" class.

****************************************

Hope this helps.

**misson** · 10-22-2011 03:36 PM

Setting an explicit width on .thumbscontainer means it won't properly be fluid (shrink-wrapping to the thumbnails), which is one of the requirements.

If you remove both the "inline-block" display and auto-margins for .thumbscontainer, there won't be any properties that center it, nor will the .thumbnails be centered. text-align applies only to inline boxes.

The "inline-block" display has another effect: it causes the height of .thumbscontainer to contain the floated children. Without it, the floating elements are ignored when calculating the height. Removing the display property would necessitate auto-clearing the floats by (e.g.) setting overflow and (for old versions of IE) triggering hasLayout. Some versions of Opera may also need a fix (such as setting the width to "100%") to get overflow to auto-clear.

**LostHorizon** · 10-22-2011 05:41 PM

Hi "misson",

I did some testings, and you're RIGHT. I always thought that "text-align" affects a container's all child elements, but in fact, it only has effect on its "inline" child elements, so definitely we're going to need the auto margins on lines #17 and #18 after all in order for the centering to work (my BAD).

To "learning_brain":

My APOLOGY for giving you the bad answer.

**learning_brain** · 11-06-2011 01:43 PM

Thanks misson. As always, you've come up trumps (apologies for the delayed response!).

After a few tweaks with vertical-align to get each thumbnail container to align (images were base aligning and throwing out the top of the containers).

LostHorizon - thank you for your efforts and yes, if the thumbcontainer had been fixed width, this would have been simple.

Now have it working in both FF and IE perfectly.

Rich

Thread: css center repeating floating thumbnails in liquid layout

LinkBack

Thread Tools

Display

css center repeating floating thumbnails in liquid layout

Re: css center repeating floating thumbnails in liquid layout

Re: css center repeating floating thumbnails in liquid layout

Re: css center repeating floating thumbnails in liquid layout

Re: css center repeating floating thumbnails in liquid layout

Re: css center repeating floating thumbnails in liquid layout

Similar Threads

PHP floating point bug and you - You might DoS yourself from the inside out

PHP floating point bug and you - You might DoS yourself from the inside out

repeating backgound

Repeating 403 Forbidden Message

Center Layout?

Posting Permissions