Question

I’ve got this design:

At the moment everything is wrapped in this rectangle with dark background. The picture, and each text string is in it’s own class. The texts are in span’s, with line breaks at the end.

My problem is that I want the three text strings to show up to the right of the picture, like this:

I bet it’s something simple, but for some reason I can’t come up with a solution for this.

There’s not really much markup to talk about here, but I’ll paste it anyways.

<div class="wrapper">
    <div class="pic"><img src="img.png" width="164" height="128"></div>
    <span class="username">petronella</span></br>
    <span class="info">Kvinna, 22 år, Uppsälje</span></br>
    <span class="desc"><em>Hej!!Jag heter Petronella~~~</em></span>
</div>

.wrapper {
    position: relative;
    float: left;
    width: 420px;
    padding: 15px;
}
.pic {
    position: relative;
    width: 164px;
    height: 128px;
}
.username {
    position: relative;
}
.info {
    position: relative;
    font-weight: bold;
}
.desc {
    position: relative;
}

Any help is appreciated, thanks.

Answer 1

Float the image to the left.

As a side note, it’s very strange to be putting those lines of text in span elements (and brs to separate) rather than, say, h2 for the username and p for the rest.

See what it looks like.