centring divs
Moderator: General Moderators
centring divs
does anyone know how i can centre a div to the page in css.
feyd | Please use
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]
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]- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
why won't my divs centre using the code below?
Code: Select all
position:absolute;Testing in IE?
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 ain the body rule, and set the rest of your rules to 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.
I googled it and found that for IE, a workaround is to put a
Code: Select all
text-align:centerCode: Select all
text-align:left|right|whathaveyou.Other browsers I've tried get it right using just the margin properties without the text-align wierdness.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
http://www.csszengarden.com
That site covers the concept pretty well.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
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.