Databases
StackOverflow2013
Postsdbo
POPlease help cant center div in css, need assistance
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPlease help cant center div in css, need assistance
    text
    copied!<p>I have exported div tags from photoshop design into dreamweaver using slices, extracted the css from head and created a style sheet. all the div tags in the page have an absolute position set for each of them. I have tried everything i can think of to center all the content on the page and nothing has worked. can someone please take a look at the code and tell me what i am missing.</p> <pre><code>&lt;HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Packet Access&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;link href="css/style_sheet.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px`enter code here`;"&gt; &lt;div id="Table_01"&gt; &lt;div id="topper"&gt; &lt;/div&gt; &lt;div id="Topper-2"&gt; &lt;/div&gt; &lt;div id="search"&gt; &lt;img src="images/search.png" width="133" height="19" alt=""&gt; &lt;/div&gt; &lt;div id="topper-side2"&gt;&lt;/div&gt; &lt;div id="topper-side"&gt;&lt;/div&gt; &lt;div id="Logo"&gt; &lt;img src="images/Logo.png" width="254" height="37" alt=""&gt; &lt;/div&gt; &lt;div id="side-logo-right"&gt;&lt;/div&gt; &lt;div id="under-search"&gt;&lt;/div&gt; &lt;div id="index-09"&gt;&lt;/div&gt; &lt;div id="navigation"&gt; &lt;img src="images/navigation.png" width="457" height="20" alt=""&gt; &lt;/div&gt; &lt;div id="under-logo"&gt;&lt;/div&gt; &lt;div id="under-navigation"&gt;&lt;/div&gt; &lt;div id="divider"&gt; &lt;img src="images/divider.jpg" width="1024" height="3" alt=""&gt; &lt;/div&gt; &lt;div id="bg-left"&gt; &lt;img src="images/bg_left.jpg" width="131" height="147" alt=""&gt; &lt;/div&gt; &lt;div id="index-15"&gt; &lt;img src="images/index_15.png" width="764" height="52" alt=""&gt; &lt;/div&gt; &lt;div id="bg-right"&gt; &lt;img src="images/bg_right.jpg" width="129" height="147" alt=""&gt; &lt;/div&gt; &lt;div id="index-17"&gt; &lt;img src="images/index_17.jpg" width="764" height="243" alt=""&gt; &lt;/div&gt; &lt;div id="index-18"&gt; &lt;img src="images/index_18.jpg" width="130" height="519" alt=""&gt; &lt;/div&gt; &lt;div id="index-19"&gt; &lt;img src="images/index_19.jpg" width="1" height="148" alt=""&gt; &lt;/div&gt; &lt;div id="index-20"&gt; &lt;img src="images/index_20.jpg" width="1" height="148" alt=""&gt; &lt;/div&gt; &lt;div id="index-21"&gt; &lt;img src="images/index_21.jpg" width="128" height="519" alt=""&gt; &lt;/div&gt; &lt;div id="index-22"&gt; &lt;img src="images/index_22.png" width="766" height="43" alt=""&gt; &lt;/div&gt; &lt;div id="index-23"&gt; &lt;img src="images/index_23.png" width="12" height="1" alt=""&gt; &lt;/div&gt; &lt;div id="OTT-box"&gt; &lt;img src="images/OTT_box.jpg" width="242" height="99" alt=""&gt; &lt;/div&gt; &lt;div id="index-25"&gt; &lt;img src="images/index_25.png" width="9" height="1" alt=""&gt; &lt;/div&gt; &lt;div id="XFP"&gt; &lt;img src="images/XFP.jpg" width="242" height="99" alt=""&gt; &lt;/div&gt; &lt;div id="index-27"&gt; &lt;img src="images/index_27.png" width="10" height="1" alt=""&gt; &lt;/div&gt; &lt;div id="Cache"&gt; &lt;img src="images/Cache.jpg" width="242" height="99" alt=""&gt; &lt;/div&gt; &lt;div id="index-29"&gt; &lt;img src="images/index_29.png" width="9" height="1" alt=""&gt; &lt;/div&gt; &lt;div id="index-30"&gt; &lt;img src="images/index_30.jpg" width="12" height="327" alt=""&gt; &lt;/div&gt; &lt;div id="index-31"&gt; &lt;img src="images/index_31.jpg" width="9" height="327" alt=""&gt; &lt;/div&gt; &lt;div id="index-32"&gt; &lt;img src="images/index_32.jpg" width="10" height="327" alt=""&gt; &lt;/div&gt; &lt;div id="index-33"&gt; &lt;img src="images/index_33.jpg" width="9" height="327" alt=""&gt; &lt;/div&gt; &lt;div id="index-34"&gt; &lt;img src="images/index_34.png" width="242" height="81" alt=""&gt; &lt;/div&gt; &lt;div id="index-35"&gt; &lt;img src="images/index_35.png" width="242" height="81" alt=""&gt; &lt;/div&gt; &lt;div id="index-36"&gt; &lt;img src="images/index_36.png" width="242" height="81" alt=""&gt; &lt;/div&gt; &lt;div id="index-37"&gt; &lt;img src="images/index_37.jpg" width="242" height="148" alt=""&gt; &lt;/div&gt; &lt;div id="index-38"&gt; &lt;img src="images/index_38.jpg" width="242" height="148" alt=""&gt; &lt;/div&gt; &lt;div id="index-39"&gt; &lt;img src="images/index_39.jpg" width="242" height="148" alt=""&gt; &lt;/div&gt; &lt;div id="footer"&gt;Copyright © 2012 Packet Access&lt;/div&gt; &lt;/div&gt; &lt;!-- End Save for Web Slices --&gt; &lt;/body&gt; &lt;/html&gt; &lt;!--The CSS is below--&gt; &lt;CSS&gt; @charset "utf-8"; *{ margin:0; padding:0; } .body { background-color: #000; text-align:center; /*For IE6 Shenanigans*/ } #Table_01 { margin: 0 auto; text-align: center; width: 1024px; } #topper { position:absolute; left:0px; top:0px; width:1024px; height:10px; background-color:#000000; } #Topper-2 { position:absolute; left:0px; top:10px; width:763px; height:6px; background-color:#000000; } #search { position:absolute; left:763px; top:10px; width:133px; height:19px; background-color:#000000; } #topper-side2 { position:absolute; left:896px; top:10px; width:128px; height:59px; background-color:#000000; } #topper-side { position:absolute; left:0px; top:16px; width:130px; height:53px; background-color:#000000; } #Logo { position:absolute; left:130px; top:16px; width:254px; height:37px; } #side-logo-right { position:absolute; left:384px; top:16px; width:379px; height:26px; background-color:#000000; } #under-search { position:absolute; left:763px; top:29px; width:133px; height:13px; background-color:#000000; } #index-09 { position: absolute; left: 384px; top: 42px; width: 55px; height: 27px; background-color: #000; } #navigation { position:absolute; left:439px; top:42px; width:457px; height:20px; background-color:#000000; } #under-logo { position:absolute; left:130px; top:53px; width:254px; height:16px; background-color:#000000; } #under-navigation { position:absolute; left:439px; top:62px; width:457px; height:7px; background-color:#000000; } #divider { position:absolute; left:0px; top:69px; width:1024px; height:3px; background-color:#000000; } #bg-left { position:absolute; left:0px; top:72px; width:131px; height:147px; } #index-15 { position:absolute; left:131px; top:72px; width:764px; height:52px; } #bg-right { position:absolute; left:895px; top:72px; width:129px; height:147px; } #index-17 { position:absolute; left:131px; top:124px; width:764px; height:243px; } #index-18 { position:absolute; left:0px; top:219px; width:130px; height:519px; } #index-19 { position:absolute; left:130px; top:219px; width:1px; height:148px; } #index-20 { position:absolute; left:895px; top:219px; width:1px; height:148px; } #index-21 { position:absolute; left:896px; top:219px; width:128px; height:519px; } #index-22 { position:absolute; left:130px; top:367px; width:766px; height:43px; } #index-23 { position:absolute; left:130px; top:410px; width:12px; height:1px; } #OTT-box { position:absolute; left:142px; top:410px; width:242px; height:99px; } #index-25 { position:absolute; left:384px; top:410px; width:9px; height:1px; } #XFP { position:absolute; left:393px; top:410px; width:242px; height:99px; } #index-27 { position:absolute; left:635px; top:410px; width:10px; height:1px; } #Cache { position:absolute; left:645px; top:410px; width:242px; height:99px; } #index-29 { position:absolute; left:887px; top:410px; width:9px; height:1px; } #index-30 { position:absolute; left:130px; top:411px; width:12px; height:327px; } #index-31 { position:absolute; left:384px; top:411px; width:9px; height:327px; } #index-32 { position:absolute; left:635px; top:411px; width:10px; height:327px; } #index-33 { position:absolute; left:887px; top:411px; width:9px; height:327px; } #index-34 { position:absolute; left:142px; top:509px; width:242px; height:81px; } #index-35 { position:absolute; left:393px; top:509px; width:242px; height:81px; } #index-36 { position:absolute; left:645px; top:509px; width:242px; height:81px; } #index-37 { position:absolute; left:142px; top:590px; width:242px; height:148px; #index-38 { position:absolute; left:393px; top:590px; width:242px; height:148px; } #index-39 { position:absolute; left:645px; top:590px; width:242px; height:148px; } #footer { position: absolute; left: 0px; top: 738px; width: 100%; height: 21px; background-color: #000000; font-family: "Helvetica LT Std"; font-size: 14px; color: #999; text-decoration: none; text-align: center; padding-top: 3px; padding-bottom: 2px; } &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