Help creating a centered, wrapping grid

Hello,

I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process.

Here is an example of what I want:

…and when I add new content:

I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand.

This is where I have gotten so far-
http://jimtierneyart.com/test/test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
        
<html>
	<head>
		<style type="text/css"> 
		
		body {
			margin : auto;
		}
		
		.wrapper {
			width: 900px;
			border: 1px solid #bbbbbb;
			margin: 50 auto;
		}
		
		.item {
			
			line-height: 223;
    		text-align: center;
    		float: left;
			width: 223px;
			height: 223px;
			border: 1px solid #dddddd;
			background: #EBEBEB;
		}
		
		img.a {
			margin: auto; 
			max-width:120px;  
			border:0; 
			max-height:175px; 
		}
		
		

</style>

		
		
		
	</head>

	<body>
		<div class="wrapper">

			header

			<BR>
			<BR>




			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>
			
				<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>
			
			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>


		</div>
	</body>
</html>

I need 2 things to happen:

  1. The parent container must be centered on the page (this worked fine until I added the Doctype tags.
  2. the thumbnails must be vertically centered within the child containers.

Can anyone point me in the right direction?
I would really appreciate some help.

I see you tried setting the display of .item to table-cell. the problem is then you couldn’t get the .items to drop down. You would need another element to do this… to serve as a display:table or table-row. So you opted to float .table. The thing is float AUTOMATICALLY makes gives your element display:block. so back to square one.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">        
<html>
	<head>
	<title></title>
		<style type="text/css"> 
		.wrapper {
			width:900px;
			border:1px solid #bbbbbb;
			margin:50px auto;
		}
		.item {
			float:left;
			text-align:center;
			width:223px;
			height:223px;
			border:1px solid #dddddd;
			background:#EBEBEB;
		}
				.item:after, item b{
content:""; 
display:inline-block;	
			vertical-align: middle;
			height:223px
	}
		.item img {
			vertical-align:middle;
			max-width:120px;  
			border:0; 
			max-height:175px; 
			vertical-align: middle;
		}
</style>
	</head>
	<body>
		<div class="wrapper">
			<div>header</div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
			<div class="item"><img  src="image.gif" alt=""></div>
		</div>
	</body>
</html>

You can use the example above to achieve what you want , if you intend on legacy IE support, add a conditional statement with .item {display:inline; zoom:1} also, as IE lt8 doesnt support :after you will need to add an empty tag after your img… could be something like this:

<div> <img> <b></b></div>

you may want to give .wrapper overflow:hidden; if you want it’s background to contain your floats…

hope that helps…

Wow, that worked perfectly, thank you so much!
ex: http://jimtierneyart.com/test/test2.html

Could you explain exactly what the “.item:after, item b{…}” does, in case I need to edit that part later?

And I’m assuming that the “.item img {…}” means that those properties only apply to images within the “item” div?

Again, thank you so much for the help.

As i said, the :after pseudo element is NOT supported by IE <8.

But what .item:after does is generates an INLINE child element , as the last element directly inside .item.

We then give this a display:inline-block; this is so we can set the pseudo element height attribute. Which we set to 100% the parent and we set vertical-aling middle so that elements will line up to the middle of this value. and that’s the trick!

.item b {} in not ncecessar, but as since IE doesnt support :after… you could achieve the same thing by rewriting your HTML <div class=“item”> <img> <b></b></div>, see?

And I’m assuming that the “.item img {…}” means that those properties only apply to images within the “item” div?

Exactly. I try not to lad up my HTML with classes an IDs when I can avoid it. since we know you want ALL images within each item so center, you can avoid having to give each IMG tag a class by writing .item img.

I hope that shed some light on the subject for you…

will this do for IE legacy?

<!--[if IE]>
.item {display:inline; zoom:1}
<![endif]-->

what you want to do is
close. What you do is this:

&lt;!--[if lt IE 8]&gt;
.item b {display:inline; zoom:1}
&lt;![endif]--&gt;[\\CODE]

dont forget to add the B tag, and remove the :after rule,  if you intend legacy IE support

I see, so you mean that I have to choose one or the other?
So, if I want it to look right in IE8, the code will looks like this?

}
		.item {
			float:left;
			text-align:center;
			width:223px;
			height:223px;
			border:1px solid #dddddd;
			background:#EBEBEB;
		}
				&lt;!--[if lt IE 8]&gt;
.item b {display:inline; zoom:1}
&lt;![endif]--&gt;

		.item img {
			vertical-align:middle;
			max-width:120px;  
			border:0; 
			max-height:175px; 
			vertical-align: middle;
		}

Sorry, I’m just having a little trouble understanding how to get maximum compatibility.

Oh well, I’m lost again.

Here’s the site in action:
Jim Tierney Art · Work

and here’s the css:
http://jimtierneyart.com/css/jt.css

If anyone here can figure this out, I would really appreciate it.

Nice art…:slight_smile:

Yes, but what I meant, exactly, was that IE cant do :after rules. I also notice you have some other code there, which I assume if for the benefit of the slide show. I do have to ask why <c>??? I am going to assume that was a recursive typo.

code this pattern:

HTML


			<div class="item">
				<a class="t" class="thumb" rel="prettyPhoto[baron]" href="images/baron/baron1.jpg" title=
				"<b>The Baron in the Trees</b>
				<BR>Personal project">
				<img class="a" src="images/baron/baron.jpg"></a>
			<i></i>
			</div>


		.item {
			float:left;
			text-align:center;
			width:223px;
			height:223px;
			border:1px solid #dddddd;
			background:#EBEBEB;
		}
		 .item i{
                         content:""; 
                        display:inline-block;	
			vertical-align: middle;
			height:223px;
	}
		.item img {
			max-width:120px;  
			border:0; 
			max-height:175px; 
			vertical-align: middle;
		}


RIGHT BEFORE you CLOSE your HEAD TAG do this:


<!--[if lt IE 8]>
<style type="text/css'>
.item i {display:inline; zoom:1}
<style type="text/css'>
<![endif]-->

Reasonings:

  1. conditional comments CANT go within the CSS or within the <style> tag. the code above creates an ADDITION style tag ONLY for IE <8 in which we add a rule to take care of IE’s idiosyncrasies.
  2. I changed .item b to .item i because I saw your light show already involves a b tag and I didnt want to cause any confusion with its CSS.
    3)<c> doesn’t exist in HTML. replaced it with the <i> so we could do this effect.

Explanations:
:after creates a pseudo (fake) element as the last child of the container. with a lil styling we can give that fake element the height of its parent. Since that element follows an “inline” flow , we can use vertical-align ( v-a only works for inline and table-cells… and sin we already figured we couldn’t do display:table-cell because you were using float… that leaves display:inline/inline-block);

I know it seems convoluted at first since this explanation requires an understanding of a few more basic concepts, but if you follow the steps like a cook book, you should be able to see how it’s done, in not why.

Thank you for the detailed response, that’s just what I needed to know. I’ll try it out and get back to you.

But for now, about the <c> tags instead of <b>, I already use <b> for bold in my image descriptions, so when I assigned “.item b” a big line height, it messed up the spacing in the description. But I can easily switch it to “i”.
I assume it’s mostly arbitrary?

Yes, it is. I used <b> and later <i> as the extra inline tag that would have been generated by the :after pseudo class. You could even use a span with a class… like <span class=“shiv”> and then have the CSS rule read : .item .shiv. Obviously that would have been a lot more characters to achieve the same thing. In your original code I didnt see that you had the image in an anchor, or that there was a title to it that the jQuery would use.

Anyhow, glad to be able to help.

Awesome, thanks again. it seems to work.

And this code will make it fully compatible with most common browsers?

yes, if done wright you will bi compatible with AT LEAST the big 4… which is like 99+% of browsers in use today. You have to watch those details tho, coding is an EXACT science.

Great,

I have that new code in place, and so far everything I’ve checked it in looks good.

Thanks again:)