HTML text aligned strange

Question

I experience some strange text alignment, can you give me a hint where the Problem is:

I was trying to create a speechbubble:

.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 with the <div class="round"> CSS. The width of the element is pushing the text over to the right.

Add this to the .round class:

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

And add this to the .faq_container class:

.faq_container {
    position: relative;
}

Demo

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

Answer 2

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 )*/
}