как сделать элемент принудительно идти рядом с элементом

Question

У меня есть div со 100% -ой шириной и содержит 2 элемента таблицы. Я использовал float на первой таблице, чтобы вторая совпадала справа, проблема в том, что первая таблица слишком велика, вторая таблица не будет идти рядом с первой таблицей, так как первая таблица занимает более 100% ширина. Я хочу, чтобы он все еще располагался рядом с первой таблицей.

HTML

<div id="container"> 
    <table id="table1"> 
    <tr> 
     . 
     </tr> 
     <tr> 
     . 
     </tr> 
     . 
     . 
     . 
    </table> 
    <table id="table2"> 
     .... 
    </table> 
</div> 

CSS

#container { 
    min-width: 100%; 
    overflow: auto; 
} 
#table1 { 
float: left; 
} 

Проблема, когда таблица 1 проходит по всей ширине 100%, то вторая таблица не двигается рядом с таблицей 1.

Answer 1

Если вы говорите о тексте, то

text-align: right; 

Или float: right;

Answer 2

Вы должны добавить к вашей CSS

#id_of_2nd_table{ float:right; }

Использование поплавок и ясно: http://www.w3schools.com/css/css_float.asp

Answer 3

Если установить максимальную ширину до 50%, что должен это сделать ,

table{ 
 
    max-width:50%; 
 
    float:left; 
 
    border:1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td>Jill asdf asdf asdf asdf asdf asdf asdf asdf asdf</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
</table>