CODEWITHSUNDEEP
htmlcss
matthias
matthias

Reputation: 2062

HTML text aligned strange

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

Upvotes: 4

Views: 252

Answers (7)

Jason Lydon
Jason Lydon

Reputation: 7180

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.

Upvotes: 1

Alex
Alex

Reputation: 11245

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

Upvotes: 1

Dominic Green
Dominic Green

Reputation: 10260

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.

Upvotes: 1

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try this:

Fiddle here

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

Good Luck...:)

Upvotes: 1

Edorka
Edorka

Reputation: 1811

try adding float:left to the .talkbubble container

Upvotes: 1

Wandile
Wandile

Reputation: 174

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

Upvotes: 1

AfromanJ
AfromanJ

Reputation: 3932

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.

Upvotes: 4

Related Questions