Адаптивный дизайн с 3 колонками

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

Я бы выбрал первый подход для мобильных устройств и установил таблицу стилей, как в этом макете.

#re2 {
  float: left;
  width: 100%; /* by default every column would be 100% width for mobile and in this example anything smaller then 641px wide */
}

Нет необходимости в медиа-запросе, так как это будет для мобильных и всех базовых стилей, то есть все столбцы будут иметь ширину 100%.

Средние экраны

Включить стили для размеров экрана выше 641px

@media only screen and (min-width: 641px) {
  #re2 {
    width: 33.333333%; /* makes this element 1/3 of the overall width for devices above 641px wide */
  }
}

Большие экраны

Включить стили для размеров экрана выше 1025px

@media only screen and (min-width: 1025px) {
  #re2 {
    width: 50%; /* makes this element half of the overall width for devices above 1025px wide */
  }
}

Использование сетки будет легко, например, в twitter bootstrap.

http://getbootstrap.com/

Существуют в основном четыре вида размеров границ экрана: большие, средние, маленькие и очень маленькие. Вы можете проверить образец и иллюстрацию на официальном сайте.

Вам нужно связать файл bootstrap css, а затем добавить класс в свой div.

Про за бутстрап состоит в том, что это легко и быстро. Однако, если вам нужно настроить дизайн, вам нужно написать дополнительный код для него. т.е. используя медиа-запрос в css.

Иногда использование JavaScript для определения ширины экрана или элемента также является опцией. Если вам нужно много разных версий макета, JavaScript лучше.

Ваши divs находятся внутри таблицы td, они должны находиться внутри div оболочки, элемент слева должен плавать влево, а элемент справа должен плавать вправо. Maths - ваш друг, вы говорите правильному div, чтобы плавать влево, а div слева шириной - 100%, поэтому независимо от того, что вы измените размер, он займет 100%, пока не достигнет максимальной ширины, которую вы определили.

<div id="wrapper" style="width:100%;">
<div id="IFloatLeft" style="float:left; width:50%; position:relative;">Left Content</div>
<div id="iFloatRight" style="float:right; width:50%; position:relative;">right content</div>
</div> // end wrapper