You may have too many divs, it can be accomplished much simpler:
#onio_showmsg_div {
width: 100%;
height: 90%;
overflow:hidden;
}
#onio_showmsg_div img {
float: left;
}
.content {
font-size: 12px;
float:left;
margin: 0 0 0 10px;
}
.content p
{
margin:0 0 5px 0;
padding: 0;
}
<div id="onio_showmsg_div">
<img src="images/user.jpg" id="onio_user_2" style="border: 2px solid lightblue">
<div class="content">
<p>BaTuTa</p>
<p><span>Na</span></p>
</div>
</div>
I have move dthe img out of the floated container and it is now floated left itself. A container (content) is used to contain your text content and also explicitly float that to the left. The overflow:hidden on the main wrapper is a bit of a float hack to contain the floats.
Looking at other answers, i might be wise for you to learn about grid, and flexbox. As my answer is a bit old fashioned (using floats) but as your original question uses floats i did too.
Just add line-height: 1px; to the <div style="display: inline-block;"> element’s style.
This will set the space between each new line to 1px.
Here is your code:
#onio_showmsg_div {
width: 100%;
height: 90%;
}
#onio_showmsg_div > #showmsg_div1 {
width: 100%;
float: left;
border: 1px solid rgba(10, 10, 10, 0.1);
border-right: none;
border-left: none;
}
#msg_user {
font-size: 12px;
}
#onio_user_2 {
border-radius: 100%;
height: 40px;
}
<div id="onio_showmsg_div">
<div id="showmsg_div1">
<img src="images/user.jpg" id="onio_user_2" style="border: 2px solid lightblue">
<div style="display: inline-block; line-height: 1px;">
<p>BaTuTa</p>
<span style="margin: 0px;padding:0px;">Na</span>
</div>
</div>
</div>
And here is a living demo: https://codepen.io/marchmello/pen/QWjKgPE?editors=1100
use flexbox for this kind of thing:
#showmsg_div1 {
display:flex;
align-items:center;
}
#msg_user {
font-size: 6px;
}
#f2{
display:flex;
flex-direction:column;
justify-content:center;
}
p{
margin:0;
padding:0;
}
<div id="showmsg_div1">
<img src="images/user.jpg" id="onio_user_2" style="border: 2px solid lightblue">
<div id='f2'style="display: inline-block;">
<p>BaTuTa</p>
<span style="margin: 0px;padding:0px;">Na</span>
</div>
</div>
I know the title seems to sound really confusing but let me show through what Im trying to achieve.
This is the picture of what I’m trying to make.
And this is what i’m getting as output of my code
As you can see in the image no 1 the name “RomEio” and the text below are inline with the icon, but its not happening in my case..
#onio_showmsg_div {
width: 100%;
height: 90%;
}
#onio_showmsg_div > #showmsg_div1 {
width: 100%;
float: left;
border: 1px solid rgba(10, 10, 10, 0.1);
border-right: none;
border-left: none;
}
#msg_user {
font-size: 12px;
}
#onio_user_2 {
border-radius: 100%;
height: 40px;
}
<div id="onio_showmsg_div">
<div id="showmsg_div1">
<img src="images/user.jpg" id="onio_user_2" style="border: 2px solid lightblue">
<div style="display: inline-block;">
<p>BaTuTa</p>
<span style="margin: 0px;padding:0px;">Na</span>
</div>
</div>
</div>
