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: 
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](http://jsfiddle.net/Lf4sr/3/)**

Note: You can remove `float: left;` from `.round`.
try adding `float:left` to the `.talkbubble` container