0

I know that I can use the settings margin: 0 auto; to position an element at the center of its container

For example I could have something like:

<body>
        <div id="container">
                <p>SOMETHING</p>
        </div>
</body>

and the related CSS that put the div having id "container" at the center of the page (at the center of its container that is the bosy element):

#container {
    margin: 0 auto;     
    width: 770px;       /* Imposto la larghezza */
}

Ok, this is clear for me but I have some doubts related to the previous CSS code:

1) Now I am using a fixed dimension template (I declare explicitally the dimension in px), can I use this policy also for liquid template (where I don't declare the dimension in px, but in %) or have I some problem?

2) What is the exact meaning of margin: 0 auto;? It only means: "position an element at the center of its container" ore it have some more specific meaning?

Tnx

Andrea

AndreaNobili
  • 40,955
  • 107
  • 324
  • 596
  • Refer to this http://stackoverflow.com/questions/3170772/what-does-auto-do-in-margin0-auto _can I use this policy also for liquid template_ Yes. You can. But it works on block level elements or elements that you convert into a block level. – Nitesh Jul 01 '13 at 12:20
  • 1
    `margin:auto` means to calculate the margin automatically. If the total available width is 1024px, then it makes sure the total of the content and the width of both margins is 1024px. So if both the left and right margin are `auto`, that does mean they get the same amount of space, (1024-770)/2 = 127px each. – Mr Lister Jul 01 '13 at 12:30

1 Answers1

0

My site (profile) uses dynamic (e.g. liquid) layout, at least width wise (it gets a bit excessive for dynamic height).

To answer the first part of your question you certainly can center things in a dynamic/liquid layout and you can use margin: 0 auto;. I typically use the following for centering anything...

.center
{
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

One of the problems you will encounter with other people's CSS is that I've noticed a lot of people have no idea how to use CSS1 and just spam CSS2 position which will mess everything up even if you've half converted it back to CSS1. Position should be limited to no more than about five or six instances on an entire page unless you're dealing with some really data-heavy layouts and usually this is for SEO to keep the content at the top in the (X)HTML code (again like my site) but visually have the menus at the top.

I've written a CSS1 tutorial that may help if you understand CSS1 which in turn may help you clean out styling issues by others.

To answer the second part of your question when you use margin: 0 auto; (this is called CSS shorthand) you are effectively writing...

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

To make it really clear another example using margin: 20ox 10px; you are effectively writing...

margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;

If you make a quick HTML file and open it with Firefox/Firebug and look at the left panel HTML tab / right panel "layout" tab it will show you how the measurement of an element is calculated from any given code.

If you have questions please comment and I'll be happy to update my answer as needed.

Community
  • 1
  • 1
John
  • 1
  • 13
  • 98
  • 177