Are you able to explain this? I'd be grateful

[newoptical]

I'm only just starting to learn this stuff - What I really want to know is - what aligns the the main container in the centre of the browser window, like on this page?

http://www.eostreorganics.org/

That's made from a template, now I'm trying to write my own template from scratch, but I can't work out how the centre alignment's done..

http://www.newoptical.net/newoptical.html

I presume it's CSS anyway. If anyone would be kind enough to explain that too me I'd be most grateful.

Thanks, Adam

[Pádraig]

Code: Select all

/* main container */
#main{width: 780px;}

Code: Select all

/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto; 
  margin-right: auto;
}

This may be wrong but its what is in their stylesheet

http://www.eostreorganics.org/style/style.css

[newoptical]

Thanks Padraig, that was my original thought, but the second link in my first post has the same exact section of css in it too, yet that's still stuck on the left..

[newoptical]

Originally Posted by Pádraig

Code: Select all

/* main container */
#main{width: 780px;}

Code: Select all

/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto; 
  margin-right: auto;
}

This may be wrong but its what is in their stylesheet

http://www.eostreorganics.org/style/style.css

Aha! the problem was simply that the newoptical page had an extra comma at the end ( #main, #links, #footer, #logo, #menu, #content, ) instead of ( #main, #links, #footer, #logo, #menu, #content ). So you were quite right. My sloppy coding at fault. Thanks again, deleting the extra comma solved the problem

[daygon]

you also want to do this for older IE Browsers because some of them dont recognize margins.

Code: Select all

body{
text-align: center;
}

[Lchad]

Proper coding to center the div is

Code: Select all

#main, #links, #footer, #logo, #menu, #content {
margin: 0 auto;
}

[newoptical]

Thanks guys, good stuff - I've taken both your recommendations on board. Thus far..

http://www.newoptical.net/

[karinne]

Actually, the right way of doing it is simply (taking your code here):

Code: Select all

/* main container */
#main {
    margin: 0 auto;
    width: 800px;
}

Since your #main wraps all your div, it will center everything. You could also do this with the body element

How to center your site horizontally
body can be used to style too!

[moojoo]

Don't forget text-align:center; on the body and text-align:left on your container for IE 5.x. Sucks but necessary.

[newoptical]

Originally Posted by moojoo

Don't forget text-align:center; on the body and text-align:left on your container for IE 5.x. Sucks but necessary.

Thanks moojoo, like this then?

http://www.newoptical.net/

http://www.newoptical.net/style/newoptical.css

I did what Karinne suggested to, and removed all the other previous centre align code.

[moojoo]

Yup, just because IE 5.x doesn't support margin:0 auto;

[karinne]

Yeppers!

[newoptical]

Nice! Thanks again, what a great forum

[karinne]

:rofl: You're saying that 'cause you just got here!

[daygon]

karinne let him tell how much he loves us and revears us like gods (of the internet).

[moojoo]

Long live tha intarWeb Screenies!

[daygon]

this guy...