main outer-most div on page will NOT center

Question

I read this and wrote this code:

  .wholePageDivForCentering
   {
        width: 80%;
        white-space: nowrap;
        display:inline-block;
        margin: 0 auto;
        border: 4px solid red;

       /* other stuff I tried........*/
       /*padding-left: 10%;*/
       /*margin-left: 10%;*/
       /*padding-right: 10%;*/
       /*margin-right: 10%;*/

   }



  <body>
     <div class="wholePageDivForCentering">
        <h2>Hello from the page</h2>
       <!-- stuff such as 2 nested divs contained text labels, and a small image -->
     </div>
  </body>

I put a solid-red, 4-pixel border around my outermost div for a reason.

I wanted to see if that thick red border rectangle around that outermost div would horizontally center itself on the page.

IT DID NOT.
EDIT: My outermost div stays on the left when the browser is maximized.

You can see I tried more than one thing. In my opinion, I should be able to:

tell this outermost div, the one with the thick red border, to take up 80% of the browser window
then using the advice from the above SO post (again, here) -- get this outermost div always taking up 80% of the browser window but HORIZONTALLY CENTERED on the browser window.

Me personally? I think my margin-left = 10%, margin-right=10% should do it but no.

To see what I want -- open Craigslist at http://sfbay.craigslist.org/ and maximize the browser window (the main page, not a nested page, of the CL site).

The horizontal width of the whitespace on either side of the Craiglist main page is the same when you maximize the browser. The main page's columns are horizontally centered.

Because (perhaps) that page has a centered div that surrounds everything else on the main page.

How do I do it?

I commented out the inlineblock and it made no change to the centering. The 2 nested divs in the outermost div need to be (horizontally) next to each other. Without the inlineblock, the.....oh waidaminit....... — wantTheBest, Mar 01 '12 at 05:05
I was about to say, when I commented out the inline block the 2 nested divs would stack vertically. However I just re-commented out the inline block and the gott-dang nested divs are STILL side-by-side horizontal where they need to be. And the gott-dang red-border div IS NOW HORIZONTALLY CENTERED on the page, shucks-dang-shimmy-doo-hah. Thanks. I've tried many permutations but I did all that BEFORE adding the margin: 0 auto; from the SO article. Guess that did it, I hope. — wantTheBest, Mar 01 '12 at 05:09
@Andrew I am about to give you and the other two folks who arrived at the same correct answer a +1, you were the one who got me suspicious of my inlineblock and got me to take it out -- sure wish you'd have posted yours as an answer so I could accept it, and I say thank you for your and everyone's help. — wantTheBest, Mar 01 '12 at 05:19

score 4 · Accepted Answer · edited Mar 01 '12 at 16:01

4

Take out display:inline-block and it should work.

Here is a Jsfiddle (click Run): http://jsfiddle.net/zKm6b/

I also recommend using an id instead of a class for that div. I hope that helps!

edited Mar 01 '12 at 16:01

Brian Mains

50,520
35
148
257

answered Mar 01 '12 at 05:08

Will Klein

2,244
17
18

score 3 · Answer 2 · answered Mar 01 '12 at 05:03

3

Why are you settings display: inline-block. It will work if display is block (which a div is by default, so you can solve the problem by removing display).

answered Mar 01 '12 at 05:03

Kenzic

525
5
15

main outer-most div on page will NOT center

2 Answers2