Почему мой текст делает автоматический абзац?

Question

Я пытался поместить текст перед изображением, и случилось так, что текст создает абзац без моего заказа.

Код в HTML, который я использую:

    <div id="userminidata">
    <div id="userminiinfo"><img id="userminipic" src="images/minipic.png">   
    <span>(User name)</span> <span class="separadorverde">|</span>  <span>Definições de Conta</span>  <span class="separadorverde">|</span>  <span>Sair</span>
    </div>
</div>

Код CSS:

#userminidata{
    float:right;
    margin: center;
    height: 50px;
    width: 250px;
    margin-top: 13px;

}

#userminipic {
    width: 30px;
    height: 30px;
    vertical-align: middle;

}

#userminiinfo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8b8b8b;
    font-style:normal;

}

.separadorverde{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #93b55a;
    font-weight:bold;
}

Как минимум скриншот происходящего: http://www.imgftw.net/img/692260808.jpg

Answer 1

Ширина #userminidata составляет всего 250 пикселей, и этого не достаточно.

Попробуйте

#userminidata 
{
  width:300px; /*or more*/
}

Answer 2

Картинка выглядит как нормальное поведение ваших HTML и CSS. Я не вижу ничего похожего на абзац.

Answer 3

Я не совсем уверен, что понимаю ваш вопрос - но я думаю, что ваш исходный порядок неверен.Если вы хотите, чтобы текст появлялся перед изображением, изображение не должно быть первым элементом в <div>.