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

Html – How to position box to the righter side of the website?

I have an issue here, I’m trying to place an box to the right side of the website and I don’t know why it is not working, I tried justify-content: flex-end; to flush the box at the "end" of the page and then add a padding-right of 200px, but that sadly doesn’t work. Any help with explanation would be appreciated.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100%;
    height: 50vh;
    background-color: #1f2937;
    position: static;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
  }

 
  
  .footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 10vh;
    background-color: #1f2937;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .logo {
    font-size: 24px;
    font-family: 'Times New Roman', Times, serif;
    color: white;
    justify-content: space-between;
    padding-top: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-left: 200px;
    position: absolute; 
    top: 0;
  }
  
  .navbar {
    color:white;
    font-size: 18px;
    position: fixed;
    width: 85%;
    top: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    padding-top: 15px;
    padding-right: 200px;
  }
  
  .navbar ul li {
    list-style: none;
    display: inline-block;
    margin: 0 20px; 
    text-decoration: none;
  }
  
  .text1 {
    position: relative;
    color: white;
    padding-left: 200px;
    font-size: 48px;
    font-weight: bold;
    width: 720px;
  }
  .text2{
    color: white;
    font-size: 18px;
    padding-left: 200px;
    width: 520px;
  }


  .text3{
    text-align: center;
    display:flex;
    align-items:center; /*vertical center*/
    justify-content:right; /*horizontal center*/
    width: 500px;
    height:350px;
    background-color: grey; 
  }
 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="logo">
      <h2>Header Logo</h2>
    </div>
    <div class="navbar">
      <ul>
        <li><a href="index.html">header link one</a></li>
        <li><a href="index.html">header link two</a></li>
        <li><a href="index.html">header link three</a></li>
      </ul>
    </div>
    <div class="text1">
      <h2>This website is awesome</h2>
    </div>
    <div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast</div>
    <div class="text3">this is a placeholder for an image</div>
  </div>
  <div class="footer">
    Copyright © The Odin Project 2023
  </div>

</body>

</html>

I tried to sort it with justify content flex end and am at my wits end, to be fair, an explanation to my issue would be very helpful to further my understanding, I’ve only included the necessary CSS Code and the whole HTML file. Thanks in advance guys!

Tags:

2

Answers


  1. 0

    ok so first of all, you are using flex properties even though you havent set display:flex;

    second-to make a div go right (for eg. box):(also indent according to will)

    .container{
display:flex;
align-items:center; /*vertical center*/
justify-content:right; /*horizontal center*/
}```
#text{
display:block;
}
    Login or Signup to reply.
  2. 0

    justify-content: flex-end on your box won’t achieve the result that you want for 2 reasons:

    1. Your box isn’t a flex element, justify-content and align-items are set on the element which has display: flex; and affect all of it’s children.
    2. Your giving your container element flex-direction: column;. This also comes with the effect, that justify-content now acts as vertical alignment. To move all elements to the right, you would have to use align-items: flex-end;

    Since you only want to move your box element to the right, you have to give it align-self: flex-end;

    Here’s the reworked code:

    .text3 {
  width: 500px;
  height: 350px;
  border: 2px solid grey;
  padding-right: 200px;
  align-self: flex-end;
}

.container {
  width: 100%;
  height: 50vh;
  background-color: #1f2937;
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="logo">
      <h2>Header Logo</h2>
    </div>
    <div class="navbar">
      <ul>
        <li><a href="index.html">header link one</a></li>
        <li><a href="index.html">header link two</a></li>
        <li><a href="index.html">header link three</a></li>
      </ul>
    </div>
    <div class="text1">
      <h2>This website is awesome</h2>
    </div>
    <div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast</div>
    <div class="text3">this is a placeholder for an image</div>
  </div>
  <div class="footer">
    Copyright © The Odin Project 2023
  </div>

</body>

</html>

    I would suggest giving this guide a read. It will help you get a better understanding of how flexbox works.

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

Back To Top
Search