Having an issue with displaying two tables next to each other inside a div. Despite my efforts to adjust the CSS, they are stacking on top of each other instead of side by side. Here is the code:
#contactdetails_table{
width: 500px;
height: 190px;
/* border: solid #234b7c 3px; */
background-color: #FFC3CE;
border-radius: 15px;
direction: rtl;
float: left;
color: white;
font-size: large;
position: relative;
overflow: scroll;
}
Below is the code for the second table that ends up below the first one:
<table style="position:relative; float:left;" cellpadding="10" cellspacing="10">
<tr>
<td>الايميل:</td>
<td><?php echo $profiledetails->email; ?></td>
</tr>
<tr>
<td>المدينة:</td>
<td><?php echo $profiledetails->city; ?></td>
</tr>
<tr>
<td>الهاتف:</td>
<td><?php echo $profiledetails->telephone; ?></td>
</tr>
<tr>
</tr>
</table>
Your assistance is greatly appreciated :)
Note: code for the first table included here:
<div id="contactdetails_table">
<table cellpadding="10" cellspacing="10" >
<tr>
<td>الاسم الكامل:</td>
<td><?php echo $profiledetails->fullname; ?></td>
</tr>
<tr>
<td>اسم المستخدم:</td>
<td><?php echo $profiledetails->username; ?></td>
</tr>
<tr>
<td>الجوال:</td>
<td><?php echo $profiledetails->mobile; ?></td>
</tr>
<tr>
<td>العنوان:</td>
<td><?php echo $profiledetails->address; ?></td>
</tr>
</table>
<table style="position:relative; float:left;" cellpadding="10" cellspacing="10">
<tr>
<td>الايميل:</td>
<td><?php echo $profiledetails->email; ?></td>
</tr>
<tr>
<td>المدينة:</td>
<td><?php echo $profiledetails->city; ?></td>
</tr>
<tr>
<td>الهاتف:</td>
<td><?php echo $profiledetails->telephone; ?></td>
</tr>
<tr>
</tr>
</table>