View Full Version : problems aligning three divs: left center & right with display: inline

01-12-2006, 02:41 AM
I'm kinda new to the CSS way of life and i'm trying to display three clumps of text across the same horizontal line... akin to a three-columned table.

what is the best way to achieve this using CSS? i assumed display: inline and three <div>'s would be required... but i could be overcomplicating my life.

also, for the middle alignment I used this:
margin-left: auto;
margin-right: auto;

is this a safe approach?

01-12-2006, 02:45 AM

01-12-2006, 03:12 AM
hehe, okay that works! i actually semi-understand the logic too!

any thoughts regarding the validity of the second question? i asked it because I have a page with just one object in the middle, but the DIV has a border and padding and all that.

do i need to add three div's just to center one?

01-12-2006, 01:09 PM
Although there are those that favour absolute positioning tricks, using auto margins definitely is a completely valid and fitting approach to center an element with a set width. Without a set width, auto margins will be rendered as zero margins. For IE versions below 6 (which don't understand the auto value but do incorrectly apply text-align to block elements), the text-align trick can be added.
You certainly don't need three divs to center one! :eek:

01-12-2006, 04:26 PM
alright, so i managed to center it horizontally, now how do i center it vertically?

#pic {
height: 233px;
width: 366px;
border: 1px #ccc solid;
padding: 20px;
margin-left: auto;
margin-right: auto; }

the #pic is the div I wish to be completely centered

01-12-2006, 06:45 PM
This might get you on the path to centering...


see if that's what you had in mind :)

01-13-2006, 03:38 PM
perfect, thanks