Основная проблема CSS/layout - динамические столбцы?

Question

У меня действительно простой вопрос с CSS, но я хотел бы знать «лучший» способ его решения.

У меня есть две таблицы. Я хочу так, чтобы, если они могут поместиться рядом друг с другом на странице (экран/окно достаточно широкий), они будут отображаться бок о бок. В противном случае я просто хочу, чтобы они были на разных строках.

Каков правильный способ решения этой проблемы с помощью CSS (или что-то еще)?

(Примечание: Я создаю создание портлета для uPortal 4. Но какие-либо общие ответы помогут)

Спасибо заранее!

Answer 1

Поместите каждую таблицу в <div> и стиле <div> контейнеров float: left

Answer 2

Вы можете даже стилизовать table элемент без div элементов. Используйте float:left, чтобы заставить их сидеть бок о бок.

<table border="1"> 
     <tr> 
     <td> 
      Hi 
     </td> 
     </tr> 
    </table> 

     <table border="1"> 
     <tr> 
     <td> 
      Hi 
     </td> 
     </tr> 
    </table> 

table{ 
float:left; 
width:200px; 
height:200px; 
font-size:2em; 
font-family:helvetica; 
} 

DEMO HERE