Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>It's because your width on the tables is set to 100% with two of the columns with the * to determine the padding. the * character tells the table to determine the width remaining and fill it with the table. So what happens is the browser renders the first * less the fixed width of the center column. It doesn't even render the third column until after the centering occurs. You can see this with firebug and stop the load when it is still aligned to the right. </p> <pre><code>&lt;div class="SiteBody"&gt; &lt;table width="100%"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td width="*"&gt;&lt;/td&gt; &lt;td width="1062"&gt;&lt;/td&gt; &lt;td width="*"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p>I will say this once because so many will probably jump on this. You shouldn't use Tables to setup layout it's bad practice and it can give you problems like what you are seeing. That said, my conscience is clear.</p> <p>You could remove the the first and third TD's, remove the Width 100% and set the background in the parent container. In my opinion this would be the best way to handle it. Set the margin to 0, auto and that should give you everything you are wanting.</p> <pre><code>&lt;div class="SiteBody"&gt; &lt;div class="SiteMiddle"&gt;//site content&lt;/div&gt; &lt;/div&gt; &lt;style&gt; .SiteBody { background: transparent url(image of background) } .SiteMiddle { width:1062px; margin: 0, auto; } &lt;/style&gt; </code></pre> <p>OR This is probably the best way as it layers the divs and allows you to set the backgrounds for left and right and still set a centered content with the correct width</p> <pre><code>&lt;div class="SiteBody"&gt; &lt;div class="SiteLeft"&gt; &lt;div class="SiteRight"&gt; &lt;div class="SiteMiddle"&gt;//site content&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;style&gt; .SiteBody { } .SiteLeft { background: transparent url(image of left background) no-repeat left top; } .SiteRight { background: transparent url(image of left background) no-repeat right top; } .SiteMiddle { margin: 0, auto; width: 1062px; } &lt;/style&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload