css center repeating floating thumbnails in liquid layout

learning_brain

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
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>[INDENT]<div id="wrapper">[/INDENT]
[INDENT=2]<div class="thumbscontainer">[/INDENT]
[INDENT=3]loop repeat....
<a class="thumbnail" href="..whatever">
[/INDENT]
[INDENT=4]<img src="..whatever">
<span>[/INDENT]
[INDENT=5]Description
[/INDENT]
[INDENT=4]</span>[/INDENT]
[INDENT=3]</a>
...end loop
[/INDENT]
[INDENT=2]</div>
[/INDENT]
[INDENT]</div>
[/INDENT]
</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?
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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

LostHorizon

Member
Messages
43
Reaction score
2
Points
8
Hi "learning_brain",

  1. 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{
[COLOR="#FF0000"]14         display:inline-block;[/COLOR]
15         position:relative;
[COLOR="#FF0000"]16         width:inherit;[/COLOR]
17         margin-left: auto;
18         margin-right: auto;
19         text-align:center;
20     }
  2. 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),

  3. 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.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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.
 
Last edited:
LostHorizon

LostHorizon

Member
Messages
43
Reaction score
2
Points
8
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

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
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
 
You must log in or register to reply here.
Top