Unable to place 2 divs in a row-CodePudding

I have a div with some text inside my div parent container and a second div with a animated logo. I want to place the first div (the one with the text inside) at the start of the page (which i have achieved without any problems) and the second div with the logo inside at the end of the page (always horizontally of course). I can't align correctly the second div and because of their size (700px) it takes extra width and goes outside of the page.

* {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
  margin: 0;
  min-height: 100% !important;
  background: linear-gradient(30deg, #000000, #053254);
}

.programmer-logo {
  height: 700px;
  animation: logo-anim infinite 1s alternate-reverse;
}

.programmer-logo-container {
  display: flex;
}

.programmer-logo-div {
  color: white;
  position: absolute;
  top: 50%;
  transform: translate(100%, -50%);
}

.title {
  text-align: start;
  margin-left: 3%;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.name-title {
  font-size: 55px;
}

.hello-title {
  font-size: 50px;
}

.desc-title {
  font-size: 30px;
  margin-top: 5px;
  color: darkgray;
}

.App {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100% !important;
}

.App-header {
  min-height: 100%;
  height: 100%;
  height: max-content;
}

@keyframes logo-anim {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(20px);
  }
}

<div className="App">
  <div className='content-container'>

    <div className='title'>
      <p className='hello-title'>Hello, i'm </p>
      <h1 className='name-title'>George Sepetadelhs</h1>
      <p className='desc-title'>Mobile and game developer</p>
    </div>

    <div className='programmer-logo-container'>
      <div className='programmer-logo-div'>
        <img className='programmer-logo' src={programmer_icon} />
      </div>
    </div>

  </div>
</div>

CodePudding user response：

I figured your problem in the use CSS position. I made changes to your CSS code:

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  margin: 0;
  min-height: 100% !important;
  background: linear-gradient(30deg, #000000 ,#053254);
}

.programmer-logo {
  height: 700px;
  animation: logo-anim infinite 1s alternate-reverse;
}

/*.programmer-logo-container {
  display: flex;
}*/

.content-container{
    width:  100%;
    position: relative;
    display: flex;
justify-content: space-between;
}

.programmer-logo-div {
  color: white;
  /*position: absolute;*/
  /*top: 50%;*/
  /*transform: translate(100%, -50%);*/
}

.title {
  text-align: start;
  margin-left: 3%;
  color: white;
  /*position: absolute;*/
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
}

.name-title {
  font-size: 55px;
}

.hello-title {
  font-size: 50px;
}

.desc-title {
  font-size: 30px;
  margin-top: 5px;
  color: darkgray;
}

/*.App {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100% !important;
}*/

.App-header {
  min-height: 100%;
  height: 100%; 
  height: max-content;
}

@keyframes logo-anim {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(20px);
  }
}

Hopefully this helps

CodePudding user response：

I think you should use container for this one. Also consider set a size limit and some break points for more responsive site