CODEWITHSUNDEEP
htmlcss
vlio20
vlio20

Reputation: 9295

text align not working (css)

I have the following html:

        <div class="chat-scroll height-full">
            <div class="width-full" style="text-align: left">
                <div class="bubble-left"></div>
            </div>
            <div class="width-full">
                <div class="bubble-right" style="text-align: right"></div>
            </div>
        </div>

Here is the css:

.height-full {
    height: 100%;
}

.width-full {
    width: 100%;
}


  .bubble {
    position: relative;
    max-width: 90%;
    min-height: 30px;
    padding: 5px;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2196F3', endColorstr='#3B4FCC');
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 10px 5px;
  }

  .bubble-left {
    @extend .bubble;
    left: 0;

  }

  .bubble-right {
    @extend .bubble;
    right: 0;
  }

The problem is as you can see in the screenshot: the boxes are not aligned 1 to the left and the second to the right. enter image description here

What did I do wrong?

Upvotes: 1

Views: 119

Answers (3)

l3est
l3est

Reputation: 1

the html file :

<div class="chat-scroll height-full">
        <div class="width-full">
            <div class="bubble-left" style="text-align:left">left</div>
            <div class="bubble-right" style="text-align:right">right</div>
        </div>
    </div>

and css :

.height-full {
height: 100%;
}

.width-full {
    width: 100%;
}
  .bubble {
    position: relative;
    max-width: 90%;
    min-height: 30px;
    padding: 5px;
    background-color:blue;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2196F3', endColorstr='#3B4FCC');
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 10px 5px;
  }

  .bubble-left {
    @extend .bubble;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
     width:90%;
    margin-right:auto;

  }

  .bubble-right {
    @extend .bubble;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
    width:90%;
    margin-left:auto;
  }

jsfiddle : http://jsfiddle.net/rtyygxdd/2/

Upvotes: 0

JRulle
JRulle

Reputation: 7568

Since they are within full width containers, you can float the elements. If you want the text aligned to a certain side, you will need to also set the text-align appropriately.

  .bubble-left {
    @extend .bubble;
    float: left;   }

  .bubble-right {
    @extend .bubble;
    float: right;   }

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

divs are not text. They are elements. Therefore, they are unaffected by text-align.

To align a div:

  • left: default, do nothing
  • center: margin-left: auto; margin-right: auto;
  • right: margin-left: auto

Upvotes: 5

Related Questions