Css
img{
float:right;
padding-bottom:-10px;
}
and
.right-msg {
float:left;
}
inside right-image check your fiddle
Pergunta
I'm unable to set image next to speech bubble. I'm confused should i wrap speech bubble and user image into a relative division or in absolute division? Someone please clarify this and help me.
For Left Msg :
<div class='row'>
<div><img src="goes here"></div>
<div class='left-msg'>Message Goes Here</div>
</div>
For Right Msg :
<div class='row'>
<div class='right-msg'>Message Goes Here</div>
<div><img src="goes here"></div>
</div>
Demo goes here : http://jsfiddle.net/LwbML/2/
The thing i'm trying to achieve : http://oi57.tinypic.com/jpvg4j.jpg
Solução
Css
img{
float:right;
padding-bottom:-10px;
}
and
.right-msg {
float:left;
}
inside right-image check your fiddle
Outras dicas
Would a floating layout cater to your needs?
A modified row from your jsfiddle would look like this:
<div class='row'>
<div class='right-msg' style="float:left">Msg</div>
<div><img style="margin-left:15px;" src="http://dummyimage.com/40x40/000/fff.jpg"/> </div>
</div>
you may check the result in a fiddle.
HTML
<div class="row">
<img class="align-left" src="images/img-31.jpg" alt="image description"/>
<div class="text">Next block</div>
</div>
<div class="row">
<img class="align-right" src="images/img-31.jpg" alt="image description"/>
<div class="text">Next block</div>
</div>
Css
.align-left {
float: left;
margin: 0 10px 0 0;
}
.align-right {
float: right;
margin: 0 0 0 10px;
}
.row {
width: 100%;
overflow: hidden;
}
.text {
background: #7bbcff;
overflow: hidden;
padding: 5px 15px;
}