How can I align the divs to right?

Question

this is image of my chat app. I want to position divs to the right but I cant do this. I tried the text align right but that did not work. When text length is long, divs should be fixed on the right. Text can expand to the left. This divs should works like text align center attribute. This is my html code

<div class="container"> 
<div id="chat-cont"> </div> 

<div class="row"><h5>Connection ID : <span id="connectionId"></span></h5></div>
<div class="row"> <div class="col-md-7">
<input type="text" id="sender" value="@ViewBag.message"></div> </div>
<div class="row"> <div class="col-md-7"><input type="text" placeholder="ReceiverId" id="client"></div>
</div> 
<div class="row"> <div class="col-md-7"> <input type="text" id="txtMessage"> 

<button>Send</button></div> </div> </div>

This is my js code

$("button").click(() => { 
let message = $("#txtMessage").val();
var user = $("#sender").val(); 

connection.invoke("ClientSendMessage", $("#client").val(),user, message) .catch(error => console.log("Error." + error));
var div = document.createElement("div"); 
div.textContent = message; 
div.style.fontSize = "20px"; 
div.style.fontFamily = "Josefin Sans, sans-serif";
div.style.paddingLeft = "5px"; 

div.style.paddingRight = "5px"; 

div.style.paddingBottom = "3px"; 
div.style.paddingTop = "3px"; 
div.style.marginLeft = "500px"; 
div.style.marginBottom = "2px"; 
div.style.width = "fit-content"; 
div.style.height = "fit-content"; 
div.style.backgroundColor = "#056162";
div.style.color = "white"; 
div.style.borderRadius = "10px"; 
div.style.border = "1px solid black";
document.getElementById("chat-cont").appendChild(div); });

And this is how to codes work [Divs should be in same position as rigt][1]

[1]: https://i.stack.imgur.com/nuPWy.png

Why do you write so much CSS in JS instead of adding a single class? — Zsolt Meszaros, Jan 12 '21 at 20:53
Does this answer your question? [How to place two divs next to each other?](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) — disinfor, Jan 12 '21 at 20:56
Your markup hints that you're using Bootstrap. Is that the case? If so, you have alignment classes built in. Please tag that, including the version. — isherwood, Jan 12 '21 at 21:19
Would this be your duplicate : https://stackoverflow.com/questions/65398223/reversed-characters-when-providing-another-string-to-text-overflow-ellipsis/65399402#65399402 (it also has an ellipsis showing on the left if text overflows) — G-Cyrillus, Jan 12 '21 at 21:36

Bryan Dellinger · Accepted Answer · 2021-01-12T21:43:07.317

1

use flexbox align items flex-end

.box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.child{
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

<div class="box">
  <div class="child">Hello</div>
  <div class="child">How are you?</div>
  <div class="child">What is your favorite lesson?</div>
</div>

edited Jan 12 '21 at 21:43

answered Jan 12 '21 at 21:16

Bryan Dellinger

4,724
7
33
79

i think you are missing that part : *Text can expand to the left.* , also, no need of display or float for flex children unless you mean `display:none;`;) – G-Cyrillus Jan 12 '21 at 21:38

DCR · Answer 2 · 2021-01-12T22:09:36.280

.box {
  display: flex;
  border: solid 1px blue;
  justify-content: flex-end;
}

.child {
  background-color: #f44336;
  color: white;
  padding: 24px 25px;
  margin: 1vw;
  display: inline-block;
  border-radius: 50%;
  text-decoration: none;
}

.spacer {
  display: flex;
  flex-direction: column
}

<div class="box">
  <div class='spacer'>
    <div>
      <div class="child">Hello</div>
    </div>
    <div>
      <div class="child">How are you?</div>
    </div>
    <div>
      <div class="child">What is your favorite<br> lesson?</div>
    </div>
  </div>
</div>

How can I align the divs to right?

2 Answers2