Html Question posted in
Some basic documentation can be found here.

Html – Align to right for h1 element to right not working

I can not get the title h1 element to be aligned to the right-side of page.

html,
body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

.title {
  margin: 20px;
  margin-bottom: 50px;
  /* Adds additional space at the bottom */
  padding: 10px;
  border: 6px solid black;
  /* Add a rectangle (border) around the container */
  display: inline-block;
  /* Shrink to fit the content */
  text-align: right;
  width: fit-content;
}

.title h1 {
  margin: 5px 0;
  /* Margin between each h1 element */
  white-space: nowrap;
  /* Prevent line breaks, keep h1 on one line */
}

.content {
  flex: 1;
  margin: 20px;
  text-align: left;
}

.bottom {
  margin: 20px;
  margin-bottom: 50px;
  /* Adds additional space at the bottom */
  padding: 10px;
  border: 6px solid black;
  /* Add a rectangle (border) around the container */
  display: inline-block;
  /* Shrink to fit the content */
  text-align: left;
  width: fit-content;
}

.bottom h1 {
  margin: 5px 0;
  /* Margin between each h1 element */
  white-space: nowrap;
  /* Prevent line breaks, keep h1 on one line */
}
<div class="title">
  <a href="index.html">
    <h1>AMIR TEYMURI</h1>
  </a>
</div>

<div class="content">
  <h2>List of compositions</h2>
  <p>Content...</p>
</div>

<div class="bottom">
  <a href="bio.html">
    <h1>BIOGRAPHY</h1>
  </a>
  <a href="misc.html">
    <h1>MISCELLANEOUS</h1>
  </a>
  <a href="contact.html">
    <h1>CONTACT</h1>
  </a>
</div>
Tags:

4

Answers


  1. 0

    There are many ways of doing it, one way would be to add the width: 100% to the title class. If you need to make the border only to the link itself, you might need to change the border to the a tag.

    Edit: as you are using flex for the body, I guess best approach would be to use align-self: flex-end.

    html,
body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.title {
  width: fit-content;
  align-self: flex-end;
  margin: 20px;
  margin-bottom: 50px;
  padding: 10px;
  border: 6px solid #000;
}

.title>a {

}

.content {
  flex: 1;
  margin: 20px;
  text-align: left;
}

.bottom {
  margin: 20px;
  margin-bottom: 50px;
  padding: 10px;
  border: 6px solid black;
  text-align: left;
  width: 100%; 
  box-sizing: border-box; 
}

.bottom > a {
  display: block;
  margin: 5px 0;
}

.bottom h1 {
  margin: 5px 0;
  white-space: nowrap;
}
    <div class="title">
  <a href="index.html">
    <h1>AMIR TEYMURI</h1>
  </a>
</div>

<div class="content">
  <h2>List of compositions</h2>
  <p>Content...</p>
</div>

<div class="bottom">
  <a href="bio.html">
    <h1>BIOGRAPHY</h1>
  </a>
  <a href="misc.html">
    <h1>MISCELLANEOUS</h1>
  </a>
  <a href="contact.html">
    <h1>CONTACT</h1>
  </a>
</div>
    Login or Signup to reply.
  2. 0

    "I can not get the title h1 element to be aligned to the right-side of page."

    If you want to move the element to the right, just use the align-self properties from flex box. Use your flex box when you set it up.

    Another approach could be `grid-layout, but for that you need to alter your CSS and HTML a bit more.

    Last possible option can be position: absolute. But I would not recommend it.

    body {
  display: flex;
  flex-direction: column;
}

.title {
  margin: 20px;
  margin-bottom: 50px;
  padding: 10px;
  border: 6px solid black;
  display: inline-block;
  text-align: right;
  width: fit-content;
  align-self: end; /*This makes use of the set flex on the body and aligns the item to the right.*/
}

.title h1 {
  margin: 5px 0;
  white-space: nowrap;
}

.content {
  flex: 1;
  margin: 20px;
  text-align: left;
}

.bottom {
  margin: 20px;
  margin-bottom: 50px;
  padding: 10px;
  border: 6px solid black;
  display: inline-block;
  text-align: left;
  width: fit-content;
}

.bottom h1 {
  margin: 5px 0;
  white-space: nowrap;
}
    <div class="title">
  <a href="index.html">
    <h1>AMIR TEYMURI</h1>
  </a>
</div>

<div class="content">
  <h2>List of compositions</h2>
  <p>Content...</p>
</div>

<div class="bottom">
  <a href="bio.html">
    <h1>BIOGRAPHY</h1>
  </a>
  <a href="misc.html">
    <h1>MISCELLANEOUS</h1>
  </a>
  <a href="contact.html">
    <h1>CONTACT</h1>
  </a>
</div>
    Login or Signup to reply.
  3. 0

    Use align-self: flex-end; instead of text-align: right for .title (which is a flex child and therefore accepts that setting.).

    html,
body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

.title {
  margin: 20px;
  margin-bottom: 50px;
  /* Adds additional space at the bottom */
  padding: 10px;
  border: 6px solid black;
  /* Add a rectangle (border) around the container */
  display: inline-block;
  /* Shrink to fit the content */
  width: fit-content;
  align-self: flex-end;
}

.title h1 {
  margin: 5px 0;
  /* Margin between each h1 element */
  white-space: nowrap;
  /* Prevent line breaks, keep h1 on one line */
}

.content {
  flex: 1;
  margin: 20px;
  text-align: left;
}

.bottom {
  margin: 20px;
  margin-bottom: 50px;
  /* Adds additional space at the bottom */
  padding: 10px;
  border: 6px solid black;
  /* Add a rectangle (border) around the container */
  display: inline-block;
  /* Shrink to fit the content */
  text-align: left;
  width: fit-content;
}

.bottom h1 {
  margin: 5px 0;
  /* Margin between each h1 element */
  white-space: nowrap;
  /* Prevent line breaks, keep h1 on one line */
}
    <div class="title">
  <a href="index.html">
    <h1>AMIR TEYMURI</h1>
  </a>
</div>

<div class="content">
  <h2>List of compositions</h2>
  <p>Content...</p>
</div>

<div class="bottom">
  <a href="bio.html">
    <h1>BIOGRAPHY</h1>
  </a>
  <a href="misc.html">
    <h1>MISCELLANEOUS</h1>
  </a>
  <a href="contact.html">
    <h1>CONTACT</h1>
  </a>
</div>
    Login or Signup to reply.
  4. 0

    use align-self: flex-end; instead of text-align: right for .title

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search