Align the orange box and text to the right of the image

March 4, 2022

I want the orange box (and the text) to be in line to the right of the image. I’ve moved around position, display and float in a few different places but I can’t seem to get it in the right place. I already have a nav bar at the top of the page (which I haven’t included). Not sure what else I need to say, I’m new to this…

my HTML

<div>
     <div class="image2"><img src="./images/PhotobyeberhardgrossgasteigerfromPexelsBW.jpg" alt="background picture2"
                width="1100">
     </div>
     <div class="boxes">
         <div class="box-1"><a href="./about.html">about</a></div>
         <div class="box-2"><a href="./portfolio.html">portfolio</a></div>
         <div class="box-3"><a href="./contact.html">contact</a></div>
     </div>
    </div>

my CSS

* {
  margin: 0;
  padding: 0;
  font-family: "Oswald", sans-serif;
}

/*--background image--*/

.image2 {
  position: relative;
}

.image2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 72.5%;
  height: 100%;
  display: inline-block;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(0, 255, 183, 0.49653364763874297)),
    color-stop(50%, rgba(243, 255, 174, 0.4797269249496674)),
    color-stop(100%, rgba(245, 225, 72, 0.5413515748096114))
  );
}

/*--right side boxes--*/

.boxes {
  text-align: center;
  float: right;
  background-color: orange;
  width: 370px;
  padding: 20px;
  font-size: 30px;
}

.boxes a {
  text-decoration: none;
  color: white;
}

.boxes a:hover {
  color: aquamarine;
  transition: 1s;
}

.box-1 {
  color: #121212;
  background-color: white;
  padding: 50px;
}

.box-1 a {
  color: #121212;
  background-color: white;
  padding: 50px;
}

.box-2 {
  color: white;
  padding: 50px;
  background-color: #121212;
}

.box-3 {
  color: white;
  padding: 50px;
  background-color: #121212;
}

`

>Solution :

You could use flexbox, it makes it so easier. Didn’t get the final layout you wanna have, but as far as aligning orange box (and the text) to the right of the image you can do it like so:

* {
  margin: 0;
  padding: 0;
  font-family: "Oswald", sans-serif;
}
.container{
  display:flex;
}
/*--background image--*/

.image2 {
  position: relative;
}

.image2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 72.5%;
  height: 100%;
  display: inline-block;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(0, 255, 183, 0.49653364763874297)),
    color-stop(50%, rgba(243, 255, 174, 0.4797269249496674)),
    color-stop(100%, rgba(245, 225, 72, 0.5413515748096114))
  );
}

/*--right side boxes--*/

.boxes {
  text-align: center;
  float: right;
  background-color: orange;
  width: 370px;
  padding: 20px;
  font-size: 30px;
}

<div class="container">
  <div class="image2"><img src="https://images.unsplash.com/photo-1646361701353-139ad5fab84e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" >
  </div>
  <div class="boxes">
    <div class="box-1"><a href="./about.html">about</a></div>
    <div class="box-2"><a href="./portfolio.html">portfolio</a></div>
    <div class="box-3"><a href="./contact.html">contact</a></div>
  </div>
</div>