Page 1 of 1
centring divs
Posted: Sun Jan 21, 2007 7:35 am
by garry27
does anyone know how i can centre a div to the page in css.
Posted: Sun Jan 21, 2007 8:20 am
by feyd
Posted: Sun Jan 21, 2007 12:59 pm
by garry27
feyd | Please use 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
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]
Posted: Sun Jan 21, 2007 1:15 pm
by Kieran Huggins
why won't my divs centre using the code below?
Testing in IE?
Posted: Mon Jan 22, 2007 3:50 pm
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
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.
Posted: Mon Jan 22, 2007 5:41 pm
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.
Posted: Mon Jan 22, 2007 5:46 pm
by Luke
the trick is getting layouts to work WITHOUT tables, buddy.

Posted: Mon Jan 22, 2007 5:56 pm
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)
Posted: Mon Jan 22, 2007 6:06 pm
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.
Posted: Mon Jan 22, 2007 6:10 pm
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..?
Posted: Mon Jan 22, 2007 6:12 pm
by Luke
it is true enlightenment. once you start with tableless design, there is no turning back. good luck sir!
Posted: Mon Jan 22, 2007 6:23 pm
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.
Posted: Mon Jan 22, 2007 6:26 pm
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.

Posted: Tue Jan 23, 2007 2:10 am
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.