DIV's align next to eachother and centered in content area.

[Stewart81]

Hi. Basically I have a div class I put together designed to be used to display an image and a link inside of it.

The class is:

.BotItemBox {
width: 170px;
height: 260px;
margin: 15px;
padding: 2px;
text-align: center;
border-color: #653076;
display: block;
float: left;
border-width: .2em;
border-style: solid;
Background-color: #ffffff;
}

Now this works fine in that it will display several boxes next to each other which is for the most part the desired result. And just as I wanted it breaks the line to accommodate the resolution/browser of the user viewing the site. The problem is it won't center these boxes in the content area. By using a table cell set to be centered to the content area I can get equal sized rows centered but any rows that are not equal the last items don't center. So say 2 rows have 3 items each then the last row has 1 item the first 2 rows center fine, the last just sits to the left. I understand the concept of why this is happening but I'm wondering if there's any way to overcome this problem so that each row centers irregardless of how many items are in that row. Hope you guys have some good advice. Been searching for a solution for this one for a little while so figured it's about time to post it as a question :)

Thanks for your help
Stewart

[D_Blackwell]

And just as I wanted it breaks the line to accommodate the resolution/browser of the user.....

So say 2 rows have 3 items each then the last row has 1 item the first 2 rows center fine, the last just sits to the left.

I understand the concept of why this is happening but I'm wondering if there's any way to overcome this problem so that each row centers irregardless of how many items are in that row.

It sounds (and I may be misunderstanding) as though you want to do two different and incompatible things with the same code. In the first quote snippet, we see that each .BotItemBox is doing just as it should; floating left. If my window is set smaller, it may only show three boxes wide. If set wider, it may show six boxes wide. However, this is where the conflict comes into play with the second quoted section. The last boxes will always be floated to the left. Because my window can be open to any width you won't know how many boxes are in the last row, or be able to center them

(There is probably a way to snoop out my window size with JS and then work in a code hack for whatever winds up on that last line. It can probably be done, and I would be interested in seeing a working sample; but worth the trouble and/or extra code.? You'll have to decide that.

To center absolutely everything, another option would be to give up the liquid design of the floats. That probably would not be my choice. I'd just let the odd extra box or two float left.

[Stewart81]

Yeah I'm just afraid it won't really look so hot that way. As it stands on my current resolution there are a total of 7 boxes and they all fit on one line. My resolution is at 1680x1050. They are created on the fly from a database.

If I set the resolution to a far more standard 1024x768 I get 3 on 2 lines and 1 on the last. Although my statement was somewhat incorrect. I was thinking it was centering the entire element they were within when they split lines but in fact all 3 rows end up more to the left. What confuses me is if they all fit in one row they do center off appropriately. But when they take up more than one row the whole setup shifts to the left. If it can't be done it can't be done and I can accept that but for visual purposes I would definitely prefer if it could be done :)

Any other options instead of using DIV that would work the way I want it by any chance?

Thanks for your help
Stewart