You may have come across this CSS annoyance. You go to type this in an HTML file:
<div class="mainWrapper"><p>Test</p></div>
In your linked CSS file you type:
.mainWrapper { width:1000; margin:0px auto; }
You THINK… Ok. Top and Bottom margin is 0px. Ok. There is nothing above or below the box. Left and Right margins set to auto. Ok. Say your screen resolution is 1680px. We can see 1000px is used for mainWrapper. The rest should be used in the Margin. 680px divided by 2 equals 340px on either side.
If you think this way you are mostly correct. Unfortunately this doesn’t work all by itself. mainWrapper needs help from the container above it. (Most likely the <body> tag).
In order for mainWrapper object to float it needs this CSS code:
body { text-align:center; }
Without this “text-align”, the box will not float in the middle of the screen. Without the “margin:0px auto; the box will not float either. You NEED both! Now go back to coding 😉
