CODEWITHSUNDEEP
htmlcssangular
user7489552
user7489552

Reputation:

Aligning divs side by side - angular

I have been trying to align my responses or data side by side in my panel but that would work out for me. What could i be doing wrong. I know this is very basic but i am a beginner. i want the the div in light blue to align just as the creamish div. please help

<div class="container">

<div *ngFor="let client of Clients">

    //light blue

    <div *ngIf="currentChat.user_email==client.from" class="pull-right well well-sm" style="background-color:mintcream;">

  {{client.line_text}} 
   <small class="text-muted">{{client.from}} | {{client.created_at}}</small>




        </div>


//creamish
<div *ngIf="currentChat.client_email==client.from" class="well well-sm" style="width:40%; background-color:antiquewhite">

    {{client.line_text}} 
   <small class="text-muted">{{client.from}} | {{client.created_at}}</small>






    </div>
</div>
</div>

enter image description here

Upvotes: 0

Views: 6269

Answers (1)

subkonstrukt
subkonstrukt

Reputation: 446

since you´re using pull-right I am assuming youre using you are using bootstrap, you problem is the pull-right class makes it float to the right so it starts stacking sideways

I would suggest to use the grid system of bootstrap to make 2 columns and stack the divs there a.e.

like this: 

<div class="row">
  <div class="col-xs-6">
     <!-- Textbox -->
     <div class="well well-sm" style="background-color:mintcream">
      Text Here
    </div>
    <!-- Textbox -->
     <div class="well well-sm" style="background-color:mintcream">
      Text Here
    </div>
  </div>
  <div class="col-xs-6">
   <!-- Textbox -->
    <div class="well well-sm" style="background-color:antiquewhite">
      Text Here
    </div>
    <!-- Textbox -->
    <div class="well well-sm" style="background-color:antiquewhite">
      Text Here
    </div>
  </div>
</div>

https://jsfiddle.net/xb9Ljxrv/

so you seperate the both parts in two even columns and fill them instead of floating to the right

which gives you a output like this output

Upvotes: 1

Related Questions