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?
Take out
display:inline-blockand 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!