By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

Please help w/ centering main div

P: 4
I have a page but it wont center the div. Can anyone take a look at it and help. When I try to center in the body using text-align: center; it doesn't work with the main container (called Table_01). Please help! I would be ever so greatful.

The page is located here:
http://www.cpiequipment.com/test_site/index.html

Here is the code:

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beanstalk Data</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="resources/beanstalk_interior.css" rel="stylesheet" type="text/css" />
<link href="resources/beanstalk_content.css" rel="stylesheet" type="text/css" />
<link href="resources/beanstalk_nav.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="resources/beanstalk.js"></script>
<style type="text/css">
<!--
body {
text-align:center;
}

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:975px;
height:740px;
text-align:left;
margin:0 auto;
overflow: hidden;
z-index: 1;
}

#beanstalk-cover-2-01 {
position:absolute;
left:0px;
top:24px;
width:668px;
height:84px;
}

#beanstalk-cover-2-02 {
position:absolute;
left:0px;
top:0px;
width:626px;
height:23px;
background-image:url(images/beanstalk_cover_2_02.jpg);
background-repeat:repeat;
}

div.topnav {
position:absolute;
left:645px;
top:1px;
width:331px;
height:21px;
z-index:1;
}

#beanstalk-mainnav {
position:absolute;
left:0px;
top:108px;
width:667px;
height:24px;
background-image:url(images/beanstalk_cover_2_07.jpg);
background-repeat:no-repeat;
}

#beanstalk-cover-2-04 {
position:absolute;
left:626px;
top:0px;
width:349px;
height:24px;
background-image:url(images/beanstalk_cover_2_04.jpg);
background-repeat:no-repeat;
}

#beanstalk-cover-2-05 {
position:absolute;
left:448px;
top:23px;
width:38px;
height:85px;
}

#beanstalk-cover-2-06 {
position:absolute;
left:660px;
top:24px;
width:335px;
height:107px;
}

#beanstalk-cover-2-08 {
position:absolute;
left:667px;
top:108px;
width:348px;
height:56px;
}

#beanstalk-cover-2-09 {
position:absolute;
left:0px;
top:132px;
width:975px;
height:33px;
background-image:url(images/beanstalk_cover_2_09.jpg);
background-repeat:repeat;
}

#beanstalk-cover-2-10 {
position:absolute;
left:11px;
top:132px;
width:656px;
height:336px;
}

#beanstalk-cover-2-11 {
position:absolute;
left:0px;
top:164px;
width:11px;
height:546px;
background-image:url(images/beanstalk_cover_2_11.jpg);
background-repeat:no-repeat;
}

#beanstalk-cover-2-12 {
position:absolute;
left:667px;
top:164px;
width:334px;
height:576px;
}

#beanstalk-cover-2-13 {
position:absolute;
left:964px;
top:164px;
width:11px;
height:546px;
background-image:url(images/beanstalk_cover_2_13.jpg);
background-repeat:no-repeat;
z-index:1;
}

#beanstalk-cover-2-14 {
position:absolute;
left:11px;
top:468px;
width:9px;
height:272px;
}

#beanstalk-cover-2-15 {
position:absolute;
left:10px;
top:468px;
width:19px;
height:224px;
background-image:url(images/beanstalk_cover_2_15.jpg);
background-repeat:no-repeat;
}

#beanstalk-cover-2-16 {
position:absolute;
left:28px;
top:468px;
width:2px;
height:223px;
background-image:url(images/beanstalk_cover_2_16.jpg);
background-repeat:repeat;
}

#beanstalk-cover-2-17 {
position:absolute;
left:29px;
top:468px;
width:273px;
height:224px;
background-image:url(images/beanstalk_cover_2_17.jpg);
background-repeat:repeat;
}

div.leftbox_title {
position:absolute;
left:29px;
top:474px;
width:273px;
height:23px;
z-index:1;
text-align:center;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #003366;
font-style: italic;

}

div.leftbox_text {
position:absolute;
left:21px;
top:515px;
width:291px;
height:165px;
z-index:2;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;

}

#left_image_float {
position:absolute;
left:161px;
top:569px;
width:127px;
height:101px;
z-index:1;
}

#beanstalk-cover-2-18 {
position:absolute;
left:65px;
top:468px;
width:246px;
height:212px;
}

#beanstalk-cover-2-19 {
position:absolute;
left:301px;
top:468px;
width:34px;
height:224px;
background-image:url(images/beanstalk_cover_2_19.jpg);
background-repeat:no-repeat;
}

#middlebox1 {
position:absolute;
left:323px;
top:467px;
width:330px;
height:226px;
background-image:url(images/box_03.jpg);
background-repeat:no-repeat;
}

div.middlebox1_title {
position:absolute;
left:348px;
top:474px;
width:271px;
height:23px;
z-index:1;
text-align:center;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #003366;
font-style: italic;

}

div.middlebox1_text {
position:absolute;
left:338px;
top:515px;
width:293px;
height:163px;
z-index:2;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;

}

#middle_image_float {
position:absolute;
left:484px;
top:576px;
width:127px;
height:101px;
z-index:1;
}

#middlebox2 {
position:absolute;
left:641px;
top:467px;
width:330px;
height:226px;
background-image:url(images/box_03.jpg);
background-repeat:no-repeat;
}

div.middlebox2_title {
position:absolute;
left:666px;
top:474px;
width:271px;
height:23px;
z-index:1;
text-align:center;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #003366;
font-style: italic;
}

div.middlebox2_text {
position:absolute;
left:656px;
top:515px;
width:293px;
height:163px;
z-index:2;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;

}

#right_image_float {
position:absolute;
left:821px;
top:577px;
width:127px;
height:101px;
z-index:1;
}

#beanstalk-cover-2-20 {
position:absolute;
left:7px;
top:165px;
width:253px;
height:545px;
background-image:url(images/beanstalk.jpg);
background-repeat:no-repeat;
}

#beanstalk-cover-2-21 {
position:absolute;
left:20px;
top:696px;
width:18px;
height:14px;
}

#beanstalk-cover-2-22 {
position:absolute;
left:0px;
top:710px;
width:975px;
height:30px;
background-image:url(images/beanstalk_cover_2_22.jpg);
background-repeat:repeat;
}

#beanstalk-cover-2-23 {
position:absolute;
left:20px;
top:710px;
width:1px;
height:30px;
}

#beanstalk-cover-2-24 {
position:absolute;
left:21px;
top:710px;
width:50px;
height:30px;
}

#beanstalk-cover-2-25 {
position:absolute;
left:271px;
top:166px;
width:519px;
height:288px;
}

#beanstalk-cover-2-26 {
position:absolute;
left:975px;
top:710px;
width:14px;
height:30px;
}
.style4 {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #003366;
font-style: italic;
}
.style5 {font-size: 36px; color: #003366; font-family: Arial, Helvetica, sans-serif;}
.style6 {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.style13 {font-size: 36px; color: #003366; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

-->
</style>
</head>
<body>
<div id="Table_01">
<div id="beanstalk-cover-2-01"><img src="images/Logo.jpg" alt="Beanstalk Data" width="365" height="70"></div>
<div class="topnav"><a href="index.htm" class="topNavLink">HOME</a>|<a href="index.htm" class="topNavLink">CONTACT US</a>|<a href="index.htm" class="topNavLink">REQUEST DEMO</a>|<a href="index.htm" class="topNavLink"> SITE MAP </a> </div>
<div id="beanstalk-cover-2-02"></div>
<div id="beanstalk-cover-2-04"></div>
<div id="beanstalk-cover-2-06">
<p>&nbsp;</p>
<blockquote>
<p class="style4"><strong>Call Now:</strong><br />
<span class="style13">(704) 529-5044</span></p>
</blockquote>
</div>
<div id="beanstalk-mainnav"></div>
<div id="mainNav">
<div id="navholder">
<ul id="nav">
<li ><a href="#" ><br />
<span class="moveover">&nbsp;&nbsp;About Beanstalk Data</span></a>
<li><a href="#"><br /><span class="moveover">&nbsp;&nbsp;&nbsp;Beanstalk Data Tools</span></a>
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;Contact Management</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Direct Mail</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Email Marketing</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Personalized URL's</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Tracking</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Scheduling</a></li>
</ul>
</li>
<li ><a href="#" ><br /><span class="moveover">&nbsp;&nbsp;&nbsp;&nbsp;How Beanstalk Works</span></a>
</li>
<li ><a href="#" ><br /><span class="moveover">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;How To Get Started</span></a>
</li>
</ul>
<!--End Nav Holder --> </div></div>
<div id="beanstalk-cover-2-09"></div>
<div id="beanstalk-cover-2-11"></div>
<div id="beanstalk-cover-2-13"></div>
<div id="beanstalk-cover-2-20"></div>
<div id="beanstalk-cover-2-15"></div>
<div id="beanstalk-cover-2-16"></div>
<div class="leftbox_title">How Beanstalk Can Help. </div>
<div class="leftbox_text">
<p>Isn&rsquo;t it nice when something important happens in your business and you don&rsquo;t have to be involved with every step of the process? Beanstalk gets you there.</p>
<p><br />
<br />
<br />
Click here to read more...</p>
</div>
<div id="left_image_float"><img src="images/hand_small.jpg" alt="Hand" /></div>
<div id="beanstalk-cover-2-17"></div>
<div id="beanstalk-cover-2-19"></div>
<div class="middlebox1_title">Tools for Success! </div>
<div class="middlebox1_text">
<p>Contact Management, Direct Mail, Personalized URL&rsquo;s, Email Marketing, and much more! Beanstalk provides you the tools you need to run a successful marketing campaign.</p>
<p><br />
<br />
Click here to read more... </p>
</div>
<div id="middle_image_float"> <img src="images/tools.jpg" alt="Beanstalk Tools" width="144" height="99" /></div>
<div id="middlebox1"></div>
<div class="middlebox2_title">Request A Demonstration. </div>
<div class="middlebox2_text">
<p>Don't waste another minute! Fill out our online request and one of our experienced representatives will contact you to setup a FREE Demonstration. Let us shoe you how beanstalk can help YOUR business. </p>
<p><br />
<br />
Click here for your FREE Demo...</p>
</div>
<div id="right_image_float"><img src="images/laptop.jpg" alt="request demonstration" width="120" height="99" /></div>
<div id="middlebox2"></div>
<div id="beanstalk-cover-2-22"></div>
<div id="beanstalk-cover-2-25">
<table width="516" height="272" border="0">
<tr>
<td height="45" colspan="3" valign="top" class="style5">Marketing Automation...</td>
</tr>
<tr>
<td height="28" colspan="3" valign="top"><div align="right" class="style4">What is it and why should you care. </div></td>
</tr>
<tr>
<td colspan="3" valign="top"><p class="style6">A revolution is afoot! The complexity of today&rsquo;s marketing and the increase of marketing clutter has created a demand for innovative new tools to amplify the value of your marketing budget. It&rsquo;s not enough that these tools work - they must take advantage of today&rsquo;s technology for maintaining data to eliminate waste and deliver relevant messages to the proper audience.</p>
<p class="style6">Beanstalk Data is the blending marketing soluions combined with process improvement to increase marketing effectiveness. Beanstalk Data will actually decrease your marketing budget by eliminating costly manual transactions and at the same time increase your return on marketing investment.</p></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Jan 14 '08 #1
Share this Question
Share on Google+
2 Replies


epots9
Expert 100+
P: 1,351
to center it in the middle, this will require javascript:

Expand|Select|Wrap|Line Numbers
  1. not_ie = document.getElementById && !document.all;
  2. winW = not_ie ? window.innerWidth : document.body.offsetWidth;
  3. winH = not_ie ? window.innerHeight : document.body.offsetHeight;
  4. document.getElementById(Table_01).style.top = (winH - document.getElementById(Table_01).clientHeight) / 2;
  5. document.getElementById(Table_01).style.left = (winW - document.getElementById(Table_01).clientWidth) / 2;
  6.  
Jan 14 '08 #2

P: 1
In the beanstalk_interior.css file, you'll need to simplify the body {} rule to look like this:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.     background-color: #FFFFFF;
  3.     padding: 0;
  4. }
The margin and width you had before were screwing things up.

Then in your index.html file's <style> section, REMOVE this block, as it's not needed:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.     text-align: center;
  3.     }
  4.  
Also in your index.html file's <style> section, REPLACE the #Table_01 block with this:

Expand|Select|Wrap|Line Numbers
  1. #Table_01 {
  2.     position:relative;
  3.     width:975px;
  4.     height:740px;
  5.     text-align:left;
  6.     margin:0 auto;
  7.     overflow: hidden;
  8.     z-index: 1;
  9. }
You were absolutely positioning it so the whole page was moved the top left of the page AND you were trying to center the page with "margin: 0 auto" which totally conflicts :)

What I did was change it to relative positioning, and I removed the "top" and "left" declarations. This allows all those other absolutely positioned elements to be positioned relative to the #Table_01 div.

Note: I downloaded your page to my computer without images, and made the corrections, so I can't be sure this will look totally correct when images are displayed.

Hope that helps.
Jan 15 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.