Question

I’ve been trying to center align the #main div on a page so far, but I have been unsuccessful.

The page in question is a generic page.

I’ve been applying the css margin: 0px auto;to the #main div, but I could not make it center align.

I wanted the content to be center-aligned on large screens, but the floating menubar to be same. Can anybody help me in achieving this? I am lost.

Answer 1

Just add this:

#main {
      margin: 0 auto;
      width: 600px;
      background-color: #EEEEEE;
      text-align: center;
}

So simple HTML example:

<div id="main">
    <span>Simply dummy text</span>
    <span>Simply dummy text</span>
    <span>Simply dummy text</span>
</div>

You can’t do width: 100% because you need to define the width of the element you are centering, not the parent element.

EDIT:

I created demo on jsFiddle.net here