Right Align Div CSS-CodePudding

I'm trying to right align a div on my navigation bar for my website. The goal is to align the div so it's always aligned in the same place towards the right of the webpage. I've tried margins, CSS positioning, and changing the div to display: inline-block;

CodePudding user response：

You can use float: right;.

You can also find other solutions here How do I right align div elements?

CodePudding user response：

You could use position absolute to remove the element from the DOM and move your element anywhere relative to the first containing parent element up the DOM tree that has a position set. Then use positioning props like top, right, bottom and/or left to move the element on the page.

See MDN on position for more info

  :root {
  --padding: .5em;
}

/* This is the parent element, set its position to relative
so the right-div will be positioneed relative to it */
#parent {
  background: red;
  padding: .5em;
  position: relative;
}

#first-div {
  background: yellow;
  padding: var(--padding);
}

p {
  padding: var(--padding);
  background: white;
}

/* set this divs position to absolute so its top, left, bottom, right 
positioning props will be relative to its closest parent set to relative */
#right-div {
  position: absolute;
  right: calc(var(--padding)   0px);
  top: calc(var(--padding)   0px);
  background: green;
  color: white;
  padding: var(--padding);

<div id="parent">
  <div id="first-div">This is the first div</div>
  <p>This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a
    paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p>
  <div id="right-div">This is the right div</div>
</div>