HTML text aligned strange - html

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

Answer 3

try adding float:left to the .talkbubble container

Answer 4

You can try this:
Fiddle here
.talkbubble_text {
display: inline-block;
text-align: left;
padding: 10px;
line-height:16px;
}
Good Luck...:)

Answer 5

I think the issue is that your last line of text is not inline with the others. This is due to the way you are laying out your code. Your text is being pushed across by your round element, which is a set height. Any text after this is not being pushed across, a quick fix would be to add a margin on the bottom of the number circle.
.round
{
margin-top: 5px;
border-radius:50%;
background-color:#3d5177;
width:50px;
height:50px;
float: left;
margin-bottom : 50px;
}
http://jsfiddle.net/Lf4sr/4/
But would probably be better to restructure your code a little to stop this happening in the first place.

Answer 6

Change positions, add overflow:hidden to .talkbubble_text to prevent float left align. Fiddle.

Answer 7

Updated: http://jsfiddle.net/Bushwazi/Lf4sr/8/
There are a lot of things that could be cleaned up in this example. There is lots of extra html. But the core problem is that if you are using float for one part, you have to use it for both. So you need to add float:left or right to .talkbubble and remove the left value.
.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 stuff in the fiddle to simplify and eliminate extra html/css too. But the core problem was mixing positioning with float and choosing just one.