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

Html – Move footer to right side container

what it should look like

I want my footer to look like the image above.

My code so far:

.footer {
  bottom: 0;
  width: 50%;
  height: 2.5rem;
  color: black;
}

.footer #email {
  color: red;
  float: right;
}
<footer class="footer">
  <P id="email">
    [email protected]
  </P>
</footer>

what it is looking like right now

Tags:

2

Answers


  1. 0 
    .footer {
bottom: 0;
height: 2.5rem; 
color: black;
display: flex;
}

div {
width: 50%;
}

.footer #email {
  width:50% ;
    color: red;
 }
    <footer class="footer">
  <div>
  </div>
   <P id="email">
    [email protected]
   </P>
</footer>

    I find flex a great way to help me with "blank" content, and the % meassure will help it being responsive, i hope this helps.

    Login or Signup to reply.
  2. 0

    Here is the solution:

    @import ("https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
}

.page-container {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  overflow: hidden;
}

.content-left,
.content-right {
  min-height: 100vh;
  padding: 20px;
  position: relative;
}

.content-left {
  width: 40%;
}

.content-right {
  flex-grow: 1;
  background: #000;
  color: #fff;
}

.heading {
  font-size: 16px;
  font-weight: normal;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  padding: 20px;
}

.footer span {
  font-size: 14px;
  position: relative;
}

.footer .f-content:nth-child(2) {
  padding: 0 20px;
  &:before {
    position: absolute;
    content: '';
    top: 1px;
    left: 7px;
    width: 1px;
    height: 16px;
    background: #fff;
  }
}

.footer .f-content:nth-child(3) {
  &:before {
    position: absolute;
    content: '';
    top: 1px;
    left: -13px;
    width: 1px;
    height: 16px;
    background: #fff;
  }
}
    <div class="page-container">
  <div class="content-left">
    <p>Digital Marketing Executive</p>
  </div>
  <div class="content-right">
    <div class="content">
      <h1 class="heading">Welcome to My Portfolio</h1>
    </div>
    <footer class="footer">
      <span class="f-content" id="email">[email protected]</span>
      <span class="f-content" id="contact">(865) 242-8596</span>
      <span class="f-content" id="copyright">©2023 Valentina Nguyen. All right reserved.</span>
    </footer>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search