How to code a div float center above a 2x2 table?

**drhowarddrfine** · Dec 5 '10, 06:48 PM

It's easy but you can't center anything without knowing the dimensions of the underlying element. If the table is centered horizontally within the viewport, it's easy to center the div horizontally, but without a vertical dimension, this can only be done statically by measuring the exact height of the table and fixing the div with that.

**Elyse Summers** · Dec 5 '10, 07:41 PM

Put the table in a div, too, then center everything, including the body, using CSS.

Code:

<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0 auto;
text-align:center;}

#content{
position:relative;
margin: 0 auto;}

#myTable{
position:relative;
margin: 0 auto;
}

</style>
</head>
<body>
<div id="content">You content would go here. Etc blah blah blah blah etc.</div>
<br>
<div id="myTable">
<table border="8" cellpadding="80" bordercolor="black" cellspacing="0" frame="border">

<tr>
<td width="50%"></td><td width="50%">Welcome</td>
</tr>
<tr>
<td width="50%"></td><td width="50%">Client</td>
</tr>
</div>


</table>
</body>
</html>

Should work.

**drhowarddrfine** · Dec 6 '10, 12:56 AM

That's not what she wants. She wants the div centered within the table.

**Elyse Summers** · Dec 6 '10, 02:29 AM

Oooh, when I saw "above" I assumed above, not "on top of", my bad.

In that case, here's your basics. It's not a hundred 100% true center right now because it's pointless making it pixel perfect when you don't know the exact size of your final content, but slightly adjusting the percentages in the #content div will let you move it around on the table.

Code:

  <html>
  <head>
  <title></title>
  <style type="text/css">
  #content{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  background-color:blue;
  }
  #myTable{
  position:absolute;
  left:25%;
  z-index:2;
  }
  </style>
  </head>
  <body>
  <div id="myTable">
  <table border="8" cellpadding="80" bordercolor="black" cellspacing="0" frame="border">
   
  <tr>
  <td width="50%"></td><td width="50%">Welcome</td>
  </tr>
  <tr>
  <td width="50%"></td><td width="50%">Client</td>
   </tr>
<div id="content">Your text here</div>
</div>
</table>
</body>
</html>

A tester version on my site (I was curious to see if it worked) : http://www.editthisdesign.com/Noname4.html

(It's only highlighted in blue so you can more easily see the div)

**Georgina Murphy** · Dec 6 '10, 06:00 AM

THANK YOU!! a big help :)

**Oralloy** · Dec 6 '10, 02:43 PM

Gerogina,

If Eylse answered your question, please select her post as the answer; that way other people who search through this formum for answers can find it.

Thanks,
Oralloy

How to code a div float center above a 2x2 table?

How to code a div float center above a 2x2 table?

Comment

Comment

Comment

Comment

Comment

Comment