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

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 ><img src="./images/PhotobyeberhardgrossgasteigerfromPexelsBW.jpg" alt="background picture2"
                width="1100">
     </div>
     <div >
         <div ><a href="./about.html">about</a></div>
         <div ><a href="./portfolio.html">portfolio</a></div>
         <div ><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;
}

`

CodePudding user response：

You can do this by setting style="display: flex" to your top div; flex also offers positioning at that point so you can vertically align the text in your second sub-div with align-items, for example align-items: center.

<!-- <div style="display: flex; align-items: center"> -->
<div style="display: flex">
  <div ><img src="https://images.unsplash.com/photo-1646361701353-139ad5fab84e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" >
  </div>
  <div >
    <div ><a href="./about.html">about</a></div>
    <div ><a href="./portfolio.html">portfolio</a></div>
    <div ><a href="./contact.html">contact</a></div>
  </div>
</div>

CodePudding user response：

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 >
  <div ><img src="https://images.unsplash.com/photo-1646361701353-139ad5fab84e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" >
  </div>
  <div >
    <div ><a href="./about.html">about</a></div>
    <div ><a href="./portfolio.html">portfolio</a></div>
    <div ><a href="./contact.html">contact</a></div>
  </div>
</div>