Alinear 2 tablas en la misma línea

[Malekith]

Hola muy buenas, estoy intentando que el css coloque 2 tablas en la misma línea, una con el 70% a la izquierda y otra con el 20% del ancho total de la página a la derecha.

El problema es que la 2º siempre queda debajo...

Este es el codigo css:

CSS del div que contiene los 2 div, con sus respectivas tablas:

Código:

#anchotabla {
	width:100%;
}

CSS de la tabla izquierda:

Código:

.table2 {
PADDING-BOTTOM: 2px; BACKGROUND: url('../images/content/table-bg.gif') no-repeat 50% 100%; 
}
.table2 TABLE {
	WIDTH: 70%; TABLE-LAYOUT: auto
}
.table2 THEAD TH {
	padding:0px; border-bottom:1px solid #1a0f08; background:#4d1a08 url('../images/content/table-header.gif') repeat-x 0px 100%; 
}
.table2 THEAD TH {
	COLOR: #f5ebd1; FONT-WEIGHT: bold
}
.table2 THEAD TH A {
	COLOR: #f5ebd1; FONT-WEIGHT: bold
}
.table2 THEAD TH.align-center .sort-tab {
	TEXT-ALIGN: center
}
.table2 THEAD TH.align-center .sort-link {
	TEXT-ALIGN: center
}
.table2 TFOOT TH {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px
}
.table2 TBODY TD {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; COLOR: #f5ebd1; PADDING-TOP: 10px
}
.table2 TBODY .row1 TD {
	BACKGROUND: #2b1507; BORDER-TOP: #31190a 1px solid
}
.table2 TBODY .row2 TD {
	BACKGROUND: #231207; BORDER-TOP: #30190b 1px solid
}
.table2 TBODY TR:hover TD {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04; COLOR: #fff
}
.table2 TBODY TR.row-active TD {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04; COLOR: #fff
}
.table2 TBODY TR.no-results TD {
	TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-LEFT: 50px; PADDING-RIGHT: 50px; BACKGROUND: #231207; COLOR: #c09a67; PADDING-TOP: 25px
}
.table2.full-width TD:first-child {
	PADDING-LEFT: 20px
}
.table2 DL {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 38px; BACKGROUND-COLOR: #231207; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; HEIGHT: 38px; CLEAR: both; PADDING-TOP: 0px
}
.table2 DT {
	DISPLAY: inline-block; FLOAT: left
}
.table2 DD {
	DISPLAY: inline-block; FLOAT: right; COLOR: #fefffe
}
.table2 H4 {
	BORDER-LEFT: 1px solid #7c2804; PADDING-BOTTOM: 6px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; BACKGROUND: #4d1a08 url('../images/content/table-header.gif') repeat-x 0px 100%; COLOR: #fff; BORDER-TOP: 1px solid #7c2804; PADDING-TOP: 6px
}
.table2 LI {
	PADDING-BOTTOM: 4px; LINE-HEIGHT: 27px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: #231207; HEIGHT: 27px; CLEAR: both; BORDER-TOP: #30190b 1px solid; PADDING-TOP: 4px
}
.table2 DL.odd {
	BACKGROUND: #2b1507; BORDER-TOP: #31190a 1px solid
}
.table2 DL:hover {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04
}
.table2 .sort-link {
	TEXT-ALIGN: left; BORDER-LEFT: #7c2804 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: block; BORDER-TOP: #7c2804 1px solid; BORDER-RIGHT: #391303 1px solid; PADDING-TOP: 8px
}
.table2 .sort-tab {
	TEXT-ALIGN: left; BORDER-LEFT: #7c2804 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: block; BORDER-TOP: #7c2804 1px solid; BORDER-RIGHT: #391303 1px solid; PADDING-TOP: 8px
}
.table2 .sort-link:hover {
	BORDER-TOP-COLOR: #af3900; BACKGROUND: #6a240b url('../images/content/table-header-hover.gif') repeat-x 0px 100%; COLOR: #fff; BORDER-LEFT-COLOR: #af3900
}
.table2 .sort-link .arrow {
	PADDING-LEFT: 10px; BACKGROUND: url('../images/content/table-sort-arrows.gif') no-repeat 0px -10px; 
}
.table2 .sort-link:hover .arrow {
	BACKGROUND-POSITION: 0px -115px
}
.table2 .sort-link .arrow.up {
	BACKGROUND-POSITION: 0px -80px
}
.table2 .sort-link:hover .arrow.up {
	BACKGROUND-POSITION: 0px -80px
}
.table2 .sort-link .arrow.down {
	BACKGROUND-POSITION: 0px -45px
}
.table2 .sort-link:hover .arrow.down {
	BACKGROUND-POSITION: 0px -45px
}
.table2 .sort-data.hidden {
	DISPLAY: none
}

CSS de la tabla derecha:

Código:

#tabladerecha {
POSITION: relative; FLOAT: right; PADDING-RIGHT: 0px; DISPLAY: inline-block; PADDING-TOP: 0px;
}

.table3 {
PADDING-TOP: 0px; PADDING-BOTTOM: 2px; BACKGROUND: url('../images/content/table-bg.gif') no-repeat 50% 100%; 
}
.table3 TABLE {
	WIDTH: 20%; TABLE-LAYOUT: auto
}
.table3 THEAD TH {
	padding:0px; border-bottom:1px solid #1a0f08; background:#4d1a08 url('../images/content/table-header.gif') repeat-x 0px 100%; 
}
.table3 THEAD TH {
	COLOR: #f5ebd1; FONT-WEIGHT: bold
}
.table3 THEAD TH A {
	COLOR: #f5ebd1; FONT-WEIGHT: bold
}
.table3 THEAD TH.align-center .sort-tab {
	TEXT-ALIGN: center
}
.table3 THEAD TH.align-center .sort-link {
	TEXT-ALIGN: center
}
.table3 TFOOT TH {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px
}
.table3 TBODY TD {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; COLOR: #f5ebd1; PADDING-TOP: 10px
}
.table3 TBODY .row1 TD {
	BACKGROUND: #2b1507; BORDER-TOP: #31190a 1px solid
}
.table3 TBODY .row2 TD {
	BACKGROUND: #231207; BORDER-TOP: #30190b 1px solid
}
.table3 TBODY TR:hover TD {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04; COLOR: #fff
}
.table3 TBODY TR.row-active TD {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04; COLOR: #fff
}
.table3 TBODY TR.no-results TD {
	TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-LEFT: 50px; PADDING-RIGHT: 50px; BACKGROUND: #231207; COLOR: #c09a67; PADDING-TOP: 25px
}
.table3.full-width TD:first-child {
	PADDING-LEFT: 20px
}
.table3 DL {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 38px; BACKGROUND-COLOR: #231207; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; HEIGHT: 38px; CLEAR: both; PADDING-TOP: 0px
}
.table3 DT {
	DISPLAY: inline-block; FLOAT: left
}
.table3 DD {
	DISPLAY: inline-block; FLOAT: right; COLOR: #fefffe
}
.table3 H4 {
	BORDER-LEFT: 1px solid #7c2804; PADDING-BOTTOM: 6px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; BACKGROUND: #4d1a08 url('../images/content/table-header.gif') repeat-x 0px 100%; COLOR: #fff; BORDER-TOP: 1px solid #7c2804; PADDING-TOP: 6px
}
.table3 LI {
	PADDING-BOTTOM: 4px; LINE-HEIGHT: 27px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: #231207; HEIGHT: 27px; CLEAR: both; BORDER-TOP: #30190b 1px solid; PADDING-TOP: 4px
}
.table3 DL.odd {
	BACKGROUND: #2b1507; BORDER-TOP: #31190a 1px solid
}
.table3 DL:hover {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04
}
.table3 .sort-link {
	TEXT-ALIGN: left; BORDER-LEFT: #7c2804 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: block; BORDER-TOP: #7c2804 1px solid; BORDER-RIGHT: #391303 1px solid; PADDING-TOP: 8px
}
.table3 .sort-tab {
	TEXT-ALIGN: left; BORDER-LEFT: #7c2804 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: block; BORDER-TOP: #7c2804 1px solid; BORDER-RIGHT: #391303 1px solid; PADDING-TOP: 8px
}
.table3 .sort-link:hover {
	BORDER-TOP-COLOR: #af3900; BACKGROUND: #6a240b url('../images/content/table-header-hover.gif') repeat-x 0px 100%; COLOR: #fff; BORDER-LEFT-COLOR: #af3900
}
.table3 .sort-link .arrow {
	PADDING-LEFT: 10px; BACKGROUND: url('../images/content/table-sort-arrows.gif') no-repeat 0px -10px; 
}
.table3 .sort-link:hover .arrow {
	BACKGROUND-POSITION: 0px -115px
}
.table3 .sort-link .arrow.up {
	BACKGROUND-POSITION: 0px -80px
}
.table3 .sort-link:hover .arrow.up {
	BACKGROUND-POSITION: 0px -80px
}
.table3 .sort-link .arrow.down {
	BACKGROUND-POSITION: 0px -45px
}
.table3 .sort-link:hover .arrow.down {
	BACKGROUND-POSITION: 0px -45px
}
.table3 .sort-data.hidden {
	DISPLAY: none
}

Este es el html:

Código HTML:

<div id="anchotabla"><div class="table2 full-width">
		<table>
				<thead>
					<tr>
														<th width="35%" align="left">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow up">Cabecera dato1</span> </a> </th>
							
														<th width="30%" align="center">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow">Cabecera dato2</span> </a> </th>					
														<th width="15%" align="center">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow">Cabecera dato3</span> </a> </th>
														<th width="20%" align="center">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow">Cabecera dato4</span> </a> </th>
					</tr>
				</thead>
			<tbody>
			
		<tr class="estilo1" style="display: table-row; ">
					<td>

						<a href="url">
						
						<strong class="item-link" data-achievement="4920">

		
							<span>dato1</span>
						</strong>
						
						</a>
						
					</td>
					<td class="align-center">
							dato2
					</td>
					<td class="align-center">
							dato3
					</td>
					<td class="align-center">
							dato4
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<div id="tabladerecha" class="table3 full-width">
		<table>
				<thead>
					<tr>
														<th width="50%" align="left">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow up">Cabecera 2dato1</span> </a> </th>
							
														<th width="50%" align="center">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow">Cabecera 2dato2</span> </a> </th>					
					</tr>
				</thead>
			<tbody>
			
			
		<tr class="estilo1" style="display: table-row; ">
					<td>

						<a href="url">
						
						<strong class="item-link" data-achievement="4920">

		
							<span>2dato1</span>
						</strong>
						
						</a>
						
					</td>
					<td class="align-center">
							2dato2
					</td>
				</tr>
			</tbody>
		</table>
	</div>

		<div class="data-options-bottom">





	<div class="table-options data-options ">


			<strong class="results-start"></strong>

	<span class="clear"><!-- --></span> </div>
		</div> </div> 

¿Dónde está el error?

Un saludo