Проблема выравнивания профиля изображения

Question

У меня есть страница, где отображаются данные профиля пользователя.

Я выровнял поля, используя следующий код,

<h4><div class='holder'><span class='plabel'>Name</span> <span class='values'>: $name</span></div></h4><br />

Соответствующий CSS,

.holder {
width:700px;
overflow:hidden;
}

.plabel {
float:left;
display:inline-block;
width:150px;
}

.values {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
width:550px;
float:right;
}

Теперь я пытаюсь добавить изображение профиля справа от данных профиля следующим образом,

Имя:

Возраст: фото здесь>

и т.д ....

Я пытался использовать следующий код перед именем,

<span class='ppic'><img src='$url' alt='Profile Pic' /></span>

с CSS,

.ppic {
width:200px;
float:right;
}

Он выровнен по правому краю, но имя и т. Д. Идет вниз, как будто я вставил разрыв строки.

Спасибо.

Answer 1

Если вам нужно, чтобы изображение оставалось на правой стороне, вы можете попробовать это вместо поплавка:

.ppic {
width:200px;
position:absolute;
right:0;
}

Answer 2

Попробуйте добавить это в свой CSS для этого элемента (.ppic):

display: inline-block;

Или сделать его <div>.