View Full Version : How to center DIV?

02-04-2007, 07:09 PM
Heres the WHOLE page of script, and near the end there are DIVs in a DIV.
<script type="text/javascript">

* Drop Down/ Overlapping Content- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
return totaloffset;

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
return false
return true

function overlayclose(subobj){

<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

* Featured Content Slider- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more



<body onload="return overlay(this, 'subcontent2', 'rightbottom')">

<!--Do not remove outer most DIV tag with id="subcontent2"-->

<DIV id="subcontent2" style="position:absolute; display:none; border: 0px solid black; background-color: #FFFFFF; width: 400px; height: 400px; padding: 8px">

<div id="slider1" class="contentslide">

<div class="contentdiv">
<img src="image1.jpg"/>

<div class="contentdiv">
<img src="image2.jpg"/>

<div class="contentdiv">
<img src="image3.jpg"/>
<div class="contentdiv">
<img src="image4jpg"/>


<div class="pagination" id="paginate-slider1"></div>

<script type="text/javascript">
//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds



How can I make the main DIV stay in the dead center of the page. As you can see, i changed a 'pop up' overlapping script to come onload: when the page loads.

02-04-2007, 07:22 PM
Theres been a similar question: http://www.codingforums.com/showthread.php?t=106675

but to answer users specifically to your coding...

<DIV id="subcontent2" style="position:absolute; display:none; border: 0px solid black; background-color: #FFFFFF; width: 400px; height: 400px; padding: 8px; margin: 0 auto;">

should put the main div in the center of the page.

If your wondering whats changed, i've added margin: 0 auto; to the style of the div... this should move it to the center.

02-04-2007, 08:05 PM
You should also remove the position:absolute as it isn't needed and may result in the content being moved from where you want it.