Как я могу получить текст сообщения рядом с аватаром, а не под ним?

Question

Поэтому я пытаюсь создать форум с аватарами, но сейчас текст идет ниже аватаров, а не рядом с ними. Как я могу это исправить?

Вот CSS:

.postbox{
    text-align: left;
    margin: auto;
    background-color: #dbfef8;
    border: 1px solid #82FFCD;
    width: 100%;
    margin-top: 10px;
}   

.postfooter{
    width: 100%;
    border-top: 1px solid #82FFCD;
}

.postheader{
    width: 100%;
    border-bottom: 1px solid #82FFCD;
}

.posttext{
    width: 70%;
    text-align: left;
    border: 1px solid #82FFCD;
}

.postavi{   
    width: 20%;
    text-align: left;
    border: 1px solid #82FFCD;
}

и вот HTML:

<div class="postbox"><div class="postheader">
                            <b><span>CyanPrime!!~::##Admin##::~</span></b>

                        </div>
                        <div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div><div class="posttext">Let's test the Hacker Avatar.</div>
                        <div class="postfooter">
                            [<a href="http://prime.programming-designs.com/test_forum/viewthread.php?thread=25">Reply</a>] 0 posts omitted.
                        </div>
                    </div>

Answer 1

Вы можете завернуть свои div в контейнер div и выпустить все, что осталось Не забудьте очистить свои поплавки.

.clear { clear: both; }

.posttext{
    float: left;
    width: 70%;
    text-align: left;
    border: 1px solid #82FFCD;
}

.postavi{
    float: left;
    width: 20%;
    text-align: left;
    border: 1px solid #82FFCD;
}


<div>
  <div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div>
  <div class="posttext">Let's test the Hacker Avatar.</div>
  <br class="clear"/>
</div>

Answer 2

Добавьте CSS "float: left;" к элементу, который должен позволять размещать текст рядом друг с другом.

Answer 3

Это должно сделать это:

.postavi{ float: left}