Click to See Complete Forum and Search --> : centering multiple divisions in one row


Goggle
02-15-2006, 09:16 AM
What I'm trying to do is center multiple divisions ie; Nine 10x14 px divisions contained in a 90x14 px division, all on the same row. When I give them centering properties using text-align and margin: auto, with proper parameters, they all align one on top of the other in a single column. When I float them left, they all align in one row but of course go as far left in their container as possible. Is it possible that I can't use divisions if I want to align in this style?

note: If the numbers always added up to nine, I could float left, but the numbers could be anywhere as low as 1 depending on the content. There for floating causes inbalances in the visual appearance of the site when there is not nine items to list.

A sample of what I've got is at http://www.aadioak.com/print.html

In IE and Firefox you'll see the column of numbers, but you might not in Opera. Is there a way to center them all in the same row? Thanks for any help, I've googled this a bit but it doesn't seem to be a common problem with a simple fix.

Steve

Webnerd
02-15-2006, 10:07 AM
Try using:


#navi2{
text-align:center;
}

#navi2 div{
display:inline;
}

Goggle
02-15-2006, 07:49 PM
I'll give it a go. By the way, I like the general appearance and simplicity of your website www.standardscompliance.com : )

edit: I gave it a go but it causes the numbers to disappear. I'm going to study 'inline' a bit and try it again, there's no sense trying to use something if you're not sure what it does, haha.

Goggle
02-15-2006, 07:56 PM
aahhh now that I see, I've got each number set as 'block', which causes a break before and after each element. I see what you were trying to do. Well, it doesn't work but when I set each number to inline, the graphical numbers disappear. I'm not sure at all why this is. EDIT: Okay, they didn't disappear. They aligned left and my eye didn't catch them there. They still formed a tower.

edit2: -moz-inline-box seemed like a winner because it makes boxes behave like inlines. Well, it still forms a tower of numbers rather than plaving them in the same line. Also, I'm sure -moz-inline-box isn't standard at all.