DIV

socoolbrewster · May 30th, 2005, 08:19 AM

Hi

I'm having to create tabless layouts using CSS / XHTML Transitional, and am kinda new to CSS positionings since having come from a Macromedia Dreamweaver / Fireworks background.

Basically I have a design layout that is broken down into a number of <DIV> which are stacked onto each other. Could somebody advise what is the best approach on centering in CSS. Bacially want to acheive a layout whereby the design is always central and remaining left and right widths of blank space are of equal widths.

Whats the best approach?

Gaz

richard.york · May 30th, 2005, 08:42 AM

text is centered with text-center. Blocks (<div>) are centered with margin: auto; (where the auto keyword is the value for the left and right margins, it does nothing for the top and bottom margins). Explorer 5.5 and Explorer 6 quirks mode do not support margin: auto;, but Explorer 6 standards mode does. In Explorer 5.5 and 6, you can use the text-align property to center blocks, but take care as this property is inherited, but that is easy to overcome.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

socoolbrewster · May 30th, 2005, 08:56 AM

Hi Rich

Thanks for the suggestion. That sounds it might do the trick. The problem I have is that I have used tables for layout for so long
it's a habbit that takes a while to get out of.

I guess what I was wondering was, say I declare each BLOCK <div> to be
a pixel width of 600. And then use percentages for the left and right
margin of each block? Would I get the same desired effect? I have give it ago but think I have confused myself a little

Gaz

richard.york · June 5th, 2005, 09:23 AM

> And then use percentages for the left and right margin of each block?

I'm not sure, I've never tried it. Why not give it a go and report your results? If all you're trying to do is center the block why not use auto margins? Don't forget that the auto margin has to be applied to the block you want to center and not the containing block, which is where it differs from the align attribute of HTML, text-align in Explorer OTOH must be applied to the containing element.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design