View Full Version : How do I get these DIVs to center?

02-17-2008, 02:31 AM
Hey guys

This is driving me nuts - any ideras how to get the artist boxes to center align?




02-17-2008, 02:52 AM
<div align="center">Content in here</div>

02-17-2008, 03:02 AM
That's what I thought too Tyanque, but it doesn't center the content. Any idea why not?



02-17-2008, 03:08 AM
ive looked at your code, put this

<div align="centre">


<div id="acts_wrapper">

then add another </div> after the acts_wrapper closing tag, should work

02-17-2008, 03:24 AM
Thanks mate, but still no joy - bizarre. I can't see anything else in the code that could be interfering with it.

02-17-2008, 04:24 AM
I'de put them into a table. Then its easy. Just because tables shouldn't be used for layouts doesn't mean they shouldn't be used...


02-17-2008, 04:57 AM
Wow - even that didn't work. I think it may have something to do with the float:left I have on the boxes, but they need it to display correctly.

02-17-2008, 08:17 AM
You need to have 1 <td> for each of your boxes


02-17-2008, 01:10 PM
No.......All the above suggestions are incorrect!
align="center" is depreciated and you will get errors on validation.
table is not required to center this. Remove it.

First of all make sure that all your div having class="box" are correctly nested in the parent div #acts_wrapper (I see the last one is placed inside the 3rd one)

You can easily center any block level element inside another block level element by giving margin:0 auto; to the inner element(IE may require an additional style to the parent element text-align:center;).
To see the effect you have to give a smaller width to the inner element to that of outer one.

Here, in your case, you have placed well the 4 elements to be centered inside a container #acts_wrapper. Your aim is to give a width to this element and center this container inside its parent.
Width can be calculated as 4*110+4*26, where 110 is the width of each box and 26 is the margin-right.
But the last element does not require that right margin. So give a style="margin-right:0" to the last one and reduce one 26 from the above width(width:518px; right?).

good luck!