Question

I have a page where it displays user profile data.

I’ve aligned the fields using the following code,

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

The corresponding css is,

.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;
}

Now I’m tring to add a profile image to the right side of profile data as follows,

Name :

Age : pic here >

etc….

I tried using the following code before name,

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

with css,

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

It is aligned to right but the name , etc goes down as if i’ve inserted line break.

Thanks.

Answer 1

If you just need the image to stay on right side, you can try this instead of float:

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