Member Avatar for Potato.Head

Hi to all, I'm sorry to bother you again,but I have the following problem, I have the following DIV, that I need to position in the center of the page, I have the following code, but you can see the div is not exactly center, space I have from the top is not the same I have in the bottom, the space I have from bot side is the same.
I was wandering also if I can do this dynamically, meaning the div will receive the width and height in run time, and them I will send the values to my method "centerObj" (How I can get the height and width of the div element.

<html>
<head>
<script>
function centerObj()
{
   var height = 200;
    var width = 400;
    height = height/2;
    height = String("-" + height + "px");
    width = width/2;
    width = String("-" + width + "px");

    var container = document.getElementById('MyDiv');
    container.style.marginTop;
    container.style.position="absolute";
    container.style.top = "50%";
    container.style.left="50%";    
    container.style.marginTop=height;/* half elements height*/
    container.style.marginLeft=width;/* half elements width*/
}
</script>
</head>
<body onload="centerObj()">
<div id="MyDiv" style="width: 400px; max-width : 401px; height : 200px; max-height : 201px;">
<div style="border : 1px solid #048ab6; overflow: hidden; background-color : #f7f7f7">
<center>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<center>
</div>
</div>
</body>
</html>

I know is a lot to ask, but I'm debugging this a lot of time, and I don't found any solutions.
Thanks in advanced :'(

  • 3 Contributors
  • 5 Replies
  • 125 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

You can center the whole div without spending too much time on the script.

Just add this rule inside your main div ("MyDiv") that holds the entire content, margin : 0 auto; .

If it does solved the issue, don't forget to marked your thread solved. Thanks...

Member Avatar for Potato.Head

Thanks for the answer, I did the following, but still doesn;t work.

<div id="MyDiv" style="width: 400px; max-width : 401px; height : 200px; max-height : 201px; margin : 0 auto;">
<div style="border : 1px solid #048ab6; overflow: hidden; background-color : #f7f7f7">
<center>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<center>
</div>
</div>
Member Avatar for MidiMagic

You have typos in your style (the : must touch the style).

It is impossible to center stuff vertically on the browser window in a way that works on all computers.

Never think of a web page as a sheet of paper. It is a scroll of paper as long as your content. And the browser window pane is not directly accessible to your page, because Windows (not the browser) does the cropping to fit the pane.

Member Avatar for essential

You can apply this technique.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Centering DIVS</title>
<style id="internal" type="text/css" media="all">
/* <![CDATA[ */
html, body {
  border : none;
  font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  margin : 0;
  padding : 0;
  text-align : center;
  width : auto; }

body {
  background-color : #f0f0f0;
  color : #506070; }

table {
  border : none;
  border-collapse : collapse;
  height : inherit;
  min-height : 600px;
  width : 100% !important; }

td, tr {
  border : none;
  padding : 0; }


td {
  width : 100% !important;
  vertical-align : middle !important; }

div {
  border : none;
  margin : 0;
  padding : 0; }

div#main {
  margin : 0 auto;
  clear : both;
  height : inherit;
  min-height : 600px;
  width : 100%; }

div#MyDiv {
  margin : 0 auto;
  height : 200px !important;
  min-height : 200px;
  max-height : 201px;
  min-width : 400px;
  max-width : 401px;
  width : 400px !important; }

div#MyDiv div.tube {
  background-color : #f7f7f7;
  border : 1px solid #ccc;
  padding : 1em;
  height : inherit;
  text-align center;
  overflow: hidden; }

/* ]]> */
</style>
</head>
<body>
<div id="main">
<table id="centerThisDiv" frame="void" rules="none" summary="Centering div on the page">
<tr><td>
<div id="MyDiv"><div class="tube">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div></div></td></tr>
</table>
</div> 
</body>
</html>
Member Avatar for essential

Hi MidiMagic,

if you are confused over this style rules, then why don't you give it a try and validate it with W3Cs CSS validation tool and see if you can squeeze something out.

Typo's in your own terms, but not with the Web standards.

div#MyDiv {
  margin : 0 auto;
  height : 200px !important;
  min-height : 200px;
  max-height : 201px;
  min-width : 400px;
  max-width : 401px;
  width : 400px !important; }

Just let me know if you find a single error over this rules.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.