HTML text aligns strangely

Question

I am experiencing weird text alignment, can you give me a hint where the problem is:

I tried to create a speech bubble:

.round
{
margin-top: 5px;
border-radius:50%;
background-color:#3d5177;
width:50px;
height:50px;
float: left;
}

.number {
color: white;  
padding: 8px 17px;
font-size: 30px;
font-weight: normal;
}

.faq_container {
overflow: hidden;
}

.talkbubble {
left: 80px;
position: relative;
width: 340px;
height: 100px;
padding: 0px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
 }

.talkbubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 13px 10px 0;
border-color: transparent #aaaaaa;
display: block;
width: 0;
z-index: 1;
left: -13px;
top: 22px;
 }

 .talkbubble_text {
display: block;
text-align: left;
padding: 10px;  
 }

http://jsfiddle.net/Lf4sr/

thanks

Answer 1

The problem is <div class="round"> CSS . The width of the item drags the text to the right.

Add this to the class .round:

.round {
     top: 0;
     left: 0;
     position: absolute;
}

And add this to the class .faq_container:

.faq_container {
    position: relative;
}

Demo

Note. You can remove float: left;from .round.

Answer 2

The correct CSS should be:

.talkbubble {
left: 30px; /* or Whatever you may want the distance from the circle to be */
position: relative;
width: 340px;
height: 100px;
padding: 10px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
}

 .talkbubble_text {
 display: inline;
 text-align: left;
/* padding: 10px; ( remove this )*/
}

Answer 3

float:left .talkbubble

Answer 4

:

.talkbubble_text {
display: inline-block;
text-align: left;
padding: 10px;  
    line-height:16px;
}

...:)

Answer 5

, , . , . , . , .

.round
{
    margin-top: 5px;
    border-radius:50%;
    background-color:#3d5177;
    width:50px;
    height:50px;
    float: left;
    margin-bottom : 50px;
}

http://jsfiddle.net/Lf4sr/4/

, , , .

Answer 6

positions, overflow:hidden .talkbubble_text, float. Fiddle.

Answer 7

: http://jsfiddle.net/Bushwazi/Lf4sr/8/

In this example, there are many things that could be cleared. There are many additional html. But the main problem is that if you use floatfor one part, you should use it for both. Therefore you need to add float:left or rightin .talkbubbleand remove the value left.

.talkbubble {
    /* left: 80px; */
    position: relative;
    width: 340px;
    height: 100px;
    padding: 0px;
    background: #aaaaaa;
    float:left;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

I did a bunch of other things in the fiddle to simplify and eliminate extra html / css. But the main problem was mixing positioningwith floatand choosing only one.