Center div and position element-CodePudding

I'm trying to recreate something like this but now I'm having a few issues. The first issue I have is to center my 'main' div I went and did it like this:

body{
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.main {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

But because of the 'position: fixed' my background is not shown anymore which I added in the body.

An other issue I have is on the site I want to recreate there are 2 p elements next to each other like this but I can't manage to get my 2 p elements next to each other with this code:

p{
  margin: 0;
  display:inline;
  float:left;
}

Here is how my p element looks like and also my whole html:

<!DOCTYPE html>
<html>
  <head>
    <title>Practice site</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/c934cb6477.js" crossorigin="anonymous"></script>
  </head>
    <body>

      <main >

        <!-- <header>
          <div >
          </div>
        </header> -->

        <div >
          <h1>Hey, I'm test</h1>
          <h2>Student software developer.</h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>


        <footer >
          <div >
            <section >
              <!-- Linkedin -->
              <a  href="#" target="_blank" role="button"
                ><i ></i
              ></a>
        
              <!-- Github -->
              <a  href="#" target="_blank" role="button"
                ><i ></i
              ></a>

             <!-- CV -->
             <a  href="#" target="_blank" role="button"
             ><i ></i
           ></a>
         </section>
          </div>
        
          <!-- Copyright -->
          <div  style="background-color: rgba(0, 0, 0, 0.2);">
            © 
            <span id="current-year"></span>
            Copyright:
            <a >test</a>
          </div>
        </footer>

      </main>

      <script src="/Files/Js/function.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    </body>
</html>

CodePudding user response：

I see your thought proccess, but unfortunately, it's not quite right. You see, the initial page was done entirely differently from the start:

Instead of centering the main div, the creator of the page gave the body a padding of 64px, and then made the wrapper div sized at 100% width and 100% - 64px * 2 height. So, to do that:

body{
  padding:64px;
}
.wrapper{
  height:calc(100vh - 64px * 2);
  width:100%;
  border: 1px solid black;
}

<div ></div>

You can see I added a border as well so that you can see where the wrapper is located. Why did I not simply just set height:100% and instead did that confusing math thing with different units? Well, setting a percentage height would return 0, so I had to take the height of the entire page, then subtract the padding of the body multiplied by 2 to actually achieve that.

What he did next (I'll assume it's a "he", no offense here) was to make the wrapper a flexbox with it's direction being along the column, and justify it's contents in space-between, meaning that the content will be put in the center of te space between the others. While having a header and a footer displayed on the top and bottom of the wrapper accordingly, we put a content div, with it's contents horizontally aligned to the center. You can see that it's justified along the center of the space between the header and the footer, achieving what we asked for. Working snippet:

body{
  padding:64px;
}
.wrapper{
  height:calc(100vh - 64px * 2);
  width:100%;
  border: 1px solid black;
  display:flex;
  flex-direction: column;
  justify-content:space-between;
}
.content{
  align-self:center;
}

<div >
  <header>Header</header>
  <div >
    Blah blah
  </div>
  <footer>Footer</footer>
</div>

Let's continue separately from the original from now on, as the way it was made makes it too hard to understand.

We will make a div that will act as a grid, then put 2 separate rows into it. Each row will space its contents differently.

body{
  padding:64px;
}
.wrapper{
  height:calc(100vh - 64px * 2);
  width:100%;
  border: 1px solid black;
  display:flex;
  flex-direction: column;
  justify-content:space-between;
}
.content{
  align-self:center;
}
.grid{
  display:flex;
  flex-direction:column;
}

<div >
  <header>Header</header>
  <div >
    <div >
      <div >Row 1 (Title and Email button)</div>
      <div >Row 2 (The 2 paragraphs)</div>
    </div>
  </div>
  <footer>Footer</footer>
</div>

The way the .grid div works is by making it a flexbox once again, and aligning its contents along the vertical axis (column), putting the one under the other.

What we will do next is split each row into 2 separate cells, by making each one a flexbox again (I love flexbox) and using justify-content:space-between, to put the contents on both ends.

body{
  padding:64px;
}
.wrapper{
  height:calc(100vh - 64px * 2);
  width:100%;
  border: 1px solid black;
  display:flex;
  flex-direction: column;
  justify-content:space-between;
  padding:10px;
}
.content{
  align-self:center;
}
.grid{
  display:flex;
  flex-direction:column;
}
.row1, .row2{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
.intro{
  padding-right:15px;
}
.bigbutton{
  padding:15px;
  border:1px solid;
}

<div >
  <header>(Not making any buttons, using the name "Marc" just to position the elements at first)</header>
  <div >
    <div >
      <div >
        <div >
          <h1>Hey, I'm Marc</h1>
          <h2>Digital designer &amp; front-end developer.</h2>
        </div>
        <div >
          <button >Get in touch</button>
        </div>
      </div>
      <div >
        <div >
        <p>Currently a design systems engineer helping people design better at InVision.</p>
        </div>
        <div >Previously worked with Wonderbly, Vanity Fair, Great Little Place, Glamour, and Discovery Network.</div>
      </div>
    </div>
  </div>
  <footer>Footer</footer>
</div>

The above snippet might not look 100% like the initial page (position-wise at least), since it's displayed in such a small space. You can see that we are getting somewhere here. In fact, I think we're done! To help you further, I will just put some styling here to make it closer to the original.

body{
  padding:64px;
}
.wrapper{
  height:calc(100vh - 64px * 2);
  width:100%;
  border: 1px solid black;
  display:flex;
  flex-direction: column;
  justify-content:space-between;
  padding:10px;
}
.content{
  align-self:center;
}
.grid{
  display:flex;
  flex-direction:column;
}
.row1, .row2{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
.intro{
  padding-right:15px;
}
.bigbutton{
  padding:15px;
  border:1px solid;
  background-image:linear-gradient(135deg, #e2718d 0%, #E9B626 50%, #e2718d 100%);
  background-size: 200% 100%;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  color: white;
  text-decoration:none;
  transition:0.3s;
}
.bigbutton:hover{
  background-position:70% 0%;
}

:root{
  font-family:monospace;
}

<link href="https://fonts.googleapis.com/css?family=Roboto Mono" rel="stylesheet">
<div >
  <header>(Not making any buttons, using the name "Marc" just to position the elements at first)</header>
  <div >
    <div >
      <div >
        <div >
          <h1>Hey, I'm Marc</h1>
          <h2>Digital designer &amp; front-end developer.</h2>
        </div>
        <div >
          <a href="mailto:[email protected]" >Get in touch</a>
        </div>
      </div>
      <div >
        <div >
        <p>Currently a design systems engineer helping people design better at InVision.</p>
        </div>
        <div >Previously worked with Wonderbly, Vanity Fair, Great Little Place, Glamour, and Discovery Network.</div>
      </div>
    </div>
  </div>
  <footer>Footer</footer>
</div>

I'll leave the rest on you. Hope I didn't get you too tired or confused. Good luck with it!

(EDIT: Damn, the snippets start to look terrible after around the 3rd step. Dont' worry tho, they will be fine in a big enough screen)

CodePudding user response：

Rather than positioning your main absolutely you can apply display: flex to the body element and set it to 100vh so it covers the viewport. The background will reppear then.

For your p elements, again, wrap them up in a div with display: flex and you and position them side by side like the example below

body {
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
  background-size: cover;
  height: 100vh;
  display: flex;
  /*display flex allows you the center the main element in the middle of your page */
  align-items: center;
  justify-content: center;
}

.main {
  /* not needed */
}

.inline-container {
  display: flex;
  gap: 1rem;
}

.inline {
  display: block;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c934cb6477.js" crossorigin="anonymous"></script>

<main >

  <!-- <header>
          <div >
          </div>
        </header> -->

  <div >
    <h1>Hey, I'm test</h1>
    <h2>Student software developer.</h2>
    <div >
      <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim
        ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim
        ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </div>


  <footer >
    <div >
      <section >
        <!-- Linkedin -->
        <a  href="#" target="_blank" role="button"><i
              ></i></a>

        <!-- Github -->
        <a  href="#" target="_blank" role="button"><i
              ></i></a>

        <!-- CV -->
        <a  href="#" target="_blank" role="button"><i
              ></i></a>
      </section>
    </div>

    <!-- Copyright -->
    <div  style="background-color: rgba(0, 0, 0, 0.2);">
      ©
      <span id="current-year"></span> Copyright:
      <a >test</a>
    </div>
  </footer>

</main>

<script src="/Files/Js/function.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>