Как сделать мой div div боком ниже друг друга

Question

Я делаю небольшой чат, и у меня возникают проблемы с тем, чтобы div отображался ниже друг друга. Это то, что у меня есть:

$i = 0; 
while($i < 5) 
{ 
echo "<div class='MyChatholders'>"; 
echo "<div class='pro_pic'>"; 
    //my image 
echo "</div>"; 
echo "<div class='ChatInfo'>"; 
//my information 
echo "</div>"; 
echo "</div>"; 
echo "<br />"; 

$i++; 
} 

МОЕ CSS:

div.MyChatholders 
{ 
left: 5px; 
color: black; 
width: 290px; 
height: 100px; 
border-radius: 10px; 
} 
div.pro_pic 
{ 
left: 5px; 
width: 30px; 
height: 30px; 
border: solid black 1px; 
} 
div.ChatInfo 
{ 
color: black; 
font-size: 14px; 
left: 40px; 
width: 245px; 
} 

Обратите внимание, что (в то время как функция) только для имитации информации извлекаемой из DBase.

Теперь мои проблемы в том, что все div находятся в одном положении. Я бы хотел, чтобы они упали ниже друг друга. Я не понимаю, почему это происходит. Может ли кто-нибудь помочь мне с моим кодом и объяснить, почему?

Я смотрел на это решение, но он не работает для меня Check here

Answer 1

Добавить position:relative; на ваш div s.

Работы скрипка на основе коды: http://jsfiddle.net/MmGyU/1/

Примечания: Границы в скрипке предназначена для демонстрационных целей.

div.MyChatholders { 
    position: relative; 
    left: 5px; 
    color: black; 
    width: 290px; 
    height: 100px; 
    border-radius: 10px; 
} 
div.pro_pic { 
    position:relative; 
    left: 5px; 
    width: 30px; 
    height: 30px; 
} 
div.ChatInfo { 
    position:relative; 
    color: black; 
    font-size: 14px; 
    left: 40px; 
    width: 245px; 
} 

Answer 2

Сделать это печатать <div> теги на новую строку в цикле с использованием \n

$i = 0; 
while($i < 5) 
{ 
echo "<div class='MyChatholders'>\n"; 
echo "<div class='pro_pic'>\n"; 
    //my image 
echo "</div>\n"; 
echo "<div class='ChatInfo'>\n"; 
//my information 
echo "</div>\n"; 
echo "</div>\n"; 
echo "<br />\n"; 

$i++; 
} 

EDIT Синтаксис был не прав , \n должно быть в пределах котировок

2nd EDIT My ошибка, \n не HTML, и это не сработает. Вы можете использовать <br /> вместо this post

Answer 3

Добавить clear:both; в раздел чата.