CSS/HTML Как разместить два блока рядом друг с другом

Question

Я хочу знать, как я мог бы разместить эти два блока рядом друг с другом, «Новости» и «Популярные проекты», http://jsfiddle.net/2cQr9/ Я пробовал несколько раз, но это не сработало ,

HTML

<div class="topMsg"> 
    <h2> News</h2> 
    <a>lorem</a> 
</div> 
<div class="popMsg"> 
    <h2>Popular Projects</h2> 
    <h3>Skin Selector</h3> 
    <a> Elorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</a> 
</div> 

CSS

body{ 
    background-color:#000; 
} 

a{ 
    text-decoration:none; 
} 



.topMsg{ 

    width:400px; 
    margin:100px 50px; 
    text-align:justify 
} 

.topMsg a,.popMsg a{ 
    color:#FFF; 
    font-family:Arial, Helvetica, sans-serif; 
} 

.topMsg h2, .popMsg h2{ 
    color:#069; 
    font-size:32px; 
} 

.popMsg{ 
    width:250px; 
    margin:100px 50px; 
    text-align:justify; 
} 

.popMsg h3{ 
    color:#028; 
} 

Answer 1

Если есть достаточно места для обоих из них рядом с Афоризм (маржа/обивка считается как пространство, как хорошо!), Вы можете просто float:left; их.

Answer 2

Вы можете иметь дисплей: встроенный блок; к .topMsg и popMsg

.topMsg{ 

    width:400px; 
    margin:100px 50px; 
    text-align:justify; 
     display:inline-block; 
    } 

.popMsg{ 

    width:250px; 
    margin:100px 50px; 
    text-align:justify; 
     display:inline-block; 
    } 

check the fiddle

Answer 3

Добавьте этот CSS код для элементов:

.popMsg{ float:left; } 

Answer 4

В основном, DIV элемент находится в display:block.

Вам просто нужно изменить отображение вашего «.popMsg» и «.topMsg» div.

.popMsg, .topMsg{ 
    display:inline; 
    float:left; 
} 

или

.popMsg, .topMsg{ 
    display:inline-block; 
} 

Answer 5

поставлены следующие строки в конце вашего CSS:

div.topMsg { float:left; } 
    div.popMsg { float:right; } 
    div.footer { clear:both; } 

теперь его левая & право, как вы хотели