I have this code for a table which is very simple:
<table cellspacing="10" cellpadding="10">
<tr>
<td><div id="mini_window"></div></td>
<td><div id="mini_window"></div></td>
<td><div id="mini_window"></div></td>
</tr>
</table>
This table code is within this div:
#body_content {
top: 30%;
left: 36%;
width:70%;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
/*background-color: #f3f3f3;*/
position:fixed;
direction: rtl;
}
and within the table cells, there is the mini_window div that is:
#mini_window {
top: 50%;
width:150px;
height:150px;
margin-top: 20px; /*set to a negative number 1/2 of your height*/
/*border-bottom: 1px solid #ccc;*/
/*border-top: 1px solid #ccc;*/
border: 1px solid black;
background-color: #f3f3f3;
/*direction: rtl;*/
}
It looks like the attached picture and that is not what I wanted. I need between each div say 20px more or less. What is going wrong?
UPDATE: Include the whole source of that page:
<html>
<head>
<?php include_once('required_css.php'); ?>
<?php include_once('required_js.php'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<?php include_once('header.php'); ?>
<div id="body_content">
<h1>ما الجديد؟</h1>
<table cellspacing="10" cellpadding="10">
<tr>
<td><div id="mini_window"></div></td>
<td></td>
<td><div id="mini_window"></div></td>
<td></td>
<td><div id="mini_window"></div></td>
</tr>
</table>
</div>
</body>
</html>
You should add margin: 10px;