dcr33
07-14-2011, 04:02 PM
I want to place two tables side-by-side in the same row with CSS but I can't.
What is wrong with the below code?:rolleyes:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div #tablecontainer
{
postion:relative;}
#t1
{
width:500px;
height:200px;
border:3px solid black ;
}
<!-- 2nd table in row styles -->
#t2
{
left:600px;
width:500px;
height:200px;
border:3px solid black ;
}
</style>
</head>
<body>
<div id="tablecontainer">
<!-- Table 1 markup-->
<table id="t1">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
<!-- Table 2 markup-->
<table id="t2">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
</body>
</html>
Actually I want to create the following layout shown in the attached picture.
I tried for the last 5 hours till my eyes are now burning. I have failed!!
How to do that?
Seniors Please Help me.
Thanks
What is wrong with the below code?:rolleyes:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div #tablecontainer
{
postion:relative;}
#t1
{
width:500px;
height:200px;
border:3px solid black ;
}
<!-- 2nd table in row styles -->
#t2
{
left:600px;
width:500px;
height:200px;
border:3px solid black ;
}
</style>
</head>
<body>
<div id="tablecontainer">
<!-- Table 1 markup-->
<table id="t1">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
<!-- Table 2 markup-->
<table id="t2">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
</body>
</html>
Actually I want to create the following layout shown in the attached picture.
I tried for the last 5 hours till my eyes are now burning. I have failed!!
How to do that?
Seniors Please Help me.
Thanks