HTML text aligned strange

css, html

Solution

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`.

Problem

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

Original source