centring divs

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
garry27
Forum Commoner
Posts: 90
Joined: Sat Oct 14, 2006 1:50 pm

centring divs

Post by garry27 »

does anyone know how i can centre a div to the page in css.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

garry27
Forum Commoner
Posts: 90
Joined: Sat Oct 14, 2006 1:50 pm

Post by garry27 »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


why won't my divs centre using the code below?

[syntax="css"]#title {position:absolute;
        margin-left: auto;  margin-right: auto;
        height:60px;
        width:780px;
		top: 0px;
		}

#main {   /* main body of webpages  */
	position:absolute;
	margin-left: auto;  margin-right: auto;
	/*	border-left: 1px solid black; border-right: 1px solid black; */
	background-color:#ffffff;
	padding-left: 25px;
	padding-right:25px;
	padding-top:18px;
	padding-bottom: 22px;
	width: 780px;
	font-family: Arial, Helvetica, sans-serif;
	top: 120px;
	/*	border-left: 1px solid black; border-right: 1px solid black; */
	vertical-align: middle;
	font-size: 14px;
	font-weight: normal;
	line-height: 25px;
	height: auto;
	bottom: auto;
}

.navtable {   /*navigation bar composite */
    position:absolute;
    margin-left: auto;  margin-right: auto;
	border-top: 12px solid #000099;
	
	width: 780px;
	background-color: #C4D8EC;
	position: absolute;
	left: 0px;
	top: 54px;
	height: 29px;
	/*border: medium;*/
	text-indent: 0pt;
	display: table;
	
}

.navtd {   /*navigation bar composite */
	padding: 2px;
	background-color: #C4D8EC;
	font-family: Arial, Helvetica, sans-serif;
	color: #000066;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	white-space: pre;
}

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

why won't my divs centre using the code below?

Code: Select all

position:absolute;
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

Testing in IE?

Post by a.heresey »

I've had trouble getting my fixed-width layouts to center correctly in IE using the margin:auto approach.

I googled it and found that for IE, a workaround is to put a

Code: Select all

text-align:center
in the body rule, and set the rest of your rules to

Code: Select all

text-align:left|right|whathaveyou.
The div in the body will then center in IE.

Other browsers I've tried get it right using just the margin properties without the text-align wierdness.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Centering divs was never really something I'd ever saw a use for, but I tried it today at work using this approach and noticed that using the margin:auto thing, I couldn't set top:#px. Maybe it was just a firefox thing, but I noticed that an easier method was that instead of using a div, I used a table, gave it a simple "align=center", and then set top:#px in my stylesheet. Then again, that may have been a firefox-only thing too.

I was more concerned about the code than the layout while I was working, but I found this topic interesting and decided to apply it.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

the trick is getting layouts to work WITHOUT tables, buddy. :)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

I've been hearing about that hinted at many times in these forums, and I'm a bit curious. Is W3C shunning the use of tables or something and I wasn't aware?

(BTW, If I should start a topic instead of ask here, I will)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

well it's more that tables aren't meant for layout. tables are meant for tabular data such as spreadsheets, charts, bank statements, etc. layouts should be done with divs so that every bit of visual adjustment can be done with css files. This way, you can change your entire site by switching out the css file. look here:
http://www.csszengarden.com

That site covers the concept pretty well.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

I had been doing everything through CSS and table IDs. I'm going to read into this site you've just shown me. Is it simlar to what I've been doing, but with divs..?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

it is true enlightenment. once you start with tableless design, there is no turning back. good luck sir!
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Wow... I only used divs for scripting. That is very very useful. I have a designer whose best designs are never exactly table-friendly, but this has definitely solved the problem. Thank you.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

well if you ever have any questions about tableless design, please don't hesitate to ask. I always love helping people with that. Just make sure to ask via a thread and not PM. :wink:
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

As Ninja said, once you've started there's no going back :)

One thing to keep in mind in your quest for the new way to develop websites (sounds good doesn't it?):
what's most important are the reasons behind the approach of using web standards. It's not about using divs instead of td's. It's about separating structure from design and about using semantic markup.

Of course when you start ditching the tables you'll have a difficult enough time worrying about browser quirks and other practical problems, but try to keep that in mind when you do your research. The csszengarden is a good example of what is possible with CSS, but it's not a real good example of using semantic markup. It suffers a bit of divitis and classitis.
Post Reply