Проблема с макетом страницы

Question

У меня возникла проблема с расположением моей веб-страницы. У меня есть 2 таблицы и те 2 таблицы как внутри 2 div. Проблема, с которой я сталкиваюсь, заключается в том, что при изменении размера моего веб-браузера контент во втором div перемещается ниже первого div.

Может ли кто-нибудь рассказать мне, как это можно исправить?

Answer 1

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

Answer 2

Вы могли бы попробовать что-то вроде этого:

CSS 
#leftcolumn { width: 300px; border: 1px solid red; float: left} 
#rightcolumn { width: 300px; border: 1px solid red; float: right} 

HTML 
<div id="leftcolumn"><p>text goes here</p></div> 
<div id="rightcolumn"><p>text goes here</p></div> 

Кроме того, если вы используете плавающий affectivly удаляет этот элемент из любых окружающих дел. Чтобы обойти эту проблему, попробуйте добавить класс div, который «очистится» от «обоих» до вашего html. Это делает все дивы сидеть красиво в там контейнер

Как это:

CSS 
.clear { clear: both;} 

HTML 
<div id"container"> 
    <div id="leftcolumn"><p>text goes here</p></div> 
    <div id="rightcolumn"><p>text goes here</p></div> 
    <div class"clear"></div> 
</div>