CODEWITHSUNDEEP
htmlcss
Max Kelly
Max Kelly

Reputation: 113

Positioning of footer text

I am trying to add a footer similar to the Airbnb one. I have been able to do the first two columns. However the third one is always slightly below the rest. I've tried: Position: Absolute (however this makes it disappear) Position: relative (this works fine however it remove the links from the other two columns). Float: right and left but doesn't let me move it up.

I'm running out of ideas of what to do so if someone could help me that would be great. here is my code and a image of what I have made. 

footer {
  border-style: solid;
  border-color: grey;
  border-width: 0.25px;
  background-color: #EF6248;
  -webkit-box-shadow: 0 5px 10px -6px black;
  -moz-box-shadow: 0 5px 10px -6px black;
  box-shadow: 0 5px 10px -6px black;
  /* NOTE: shadow of footer */
  padding-bottom: 200px;
  margin-top: 10%;
  /* NOTE: where the footer sits on page */
}

.footer-links {
  color: white;
}

.footer-links:hover {
  color: black;
}

.col-1 {
  padding-left: 150px;
  padding-top: 15px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  float: left;
}

.col-1 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-2 {
  padding-top: 15px;
  padding-left: 130px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  position: relative;
}

.col-2 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-3 {
  padding-top: 15px;
  padding-left: 550px;
  padding-bottom: 100px;
  bottom: 100px;
  color: white;
  font-weight: bold;
  display: table;
  float: left;
  positi
}

.col-3 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}
<footer>


  <div class="col-1">
    Revel
    <hr>
    <span><a href="#" class="footer-links"> About us       </a></span>
    <span><a href="#" class="footer-links"> Contact us     </a></span>
    <span><a href="#" class="footer-links"> FAQ            </a></span>
    <span><a href="#" class="footer-links"> Careers        </a></span>
  </div>

  <div class="col-2">
    Event Host
    <hr>
    <span> <a href="#" class="footer-links"> Why use Revel  </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> Join Revel     </a></span>
  </div>

  <div class="col-3">
    Event Service
    <hr>
    <span><a href="#" class="footer-links"> Why partner with Revel  </a></span>
    <span><a href="#" class="footer-links"> Guidebooks              </a></span>
    <span><a href="#" class="footer-links"> FAQ                     </a></span>
    <span><a href="#" class="footer-links"> Partner with Revel      </a></span>
  </div>


</footer>

enter image description here

Upvotes: 0

Views: 64

Answers (5)

Ganesh Yadav
Ganesh Yadav

Reputation: 2685

You should use box-sizing: border-box; to prevent width increasing because of padding. 

footer *{
   box-sizing:border-box;
}

Use Flexbox for better alignment and positioning.

.footer{
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

Fiddle Demo here

Upvotes: 0

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

Please don't make it too complicated. It is simple with few lines of style. check the example below.

footer {
width: 100%;
  border-style: solid;
  border-color: grey;
  border-width: 0.25px;
  background-color: #EF6248;
  -webkit-box-shadow: 0 5px 10px -6px black;
   -moz-box-shadow: 0 5px 10px -6px black;
        box-shadow: 0 5px 10px -6px black; /* NOTE: shadow of footer */
  padding-bottom: 200px;
  margin-top: 10%; /* NOTE: where the footer sits on page */
  
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
 }

 .footer-links {
   color: white;
 }
 .footer-links:hover {
   color: black;
 }

.col-1,
.col-2,
.col-3 {
 width: 30%;
 margin: 0 1.65%;
 float: left;
}
<footer>


    <div class="col-1">
         Revel
             <hr>
      <span><a href="#" class="footer-links"> About us       </a></span>
      <span><a href="#" class="footer-links"> Contact us     </a></span>
      <span><a href="#" class="footer-links"> FAQ            </a></span>
      <span><a href="#" class="footer-links"> Careers        </a></span>
      </div>

    <div class="col-2">
         Event Host
         <hr>
      <span> <a href="#" class="footer-links"> Why use Revel  </a></span>
      <span> <a href="#" class="footer-links"> test           </a></span>
      <span> <a href="#" class="footer-links"> test           </a></span>
      <span> <a href="#" class="footer-links"> Join Revel     </a></span>
    </div>

    <div class="col-3">
        Event Service
       <hr>
       <span><a href="#" class="footer-links"> Why partner with Revel  </a></span>
       <span><a href="#" class="footer-links"> Guidebooks              </a></span>
       <span><a href="#" class="footer-links"> FAQ                     </a></span>
       <span><a href="#" class="footer-links"> Partner with Revel      </a></span>
    </div>


  </footer>

Upvotes: 0

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

These are the things causing problems:

  1. positi instead of position:relative in col-3
  2. float:left to col-2 as well

footer {
  border-style: solid;
  border-color: grey;
  border-width: 0.25px;
  background-color: #EF6248;
  -webkit-box-shadow: 0 5px 10px -6px black;
  -moz-box-shadow: 0 5px 10px -6px black;
  box-shadow: 0 5px 10px -6px black;
  /* NOTE: shadow of footer */
  padding-bottom: 200px;
  margin-top: 10%;
  border: 10px solid green;
  /* NOTE: where the footer sits on page */
}

.footer-links {
  color: white;
}

.footer-links:hover {
  color: black;
}

.col-1 {
  padding-left: 150px;
  padding-top: 15px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  float: left;
}

.col-1 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-2 {
  padding-top: 15px;
  padding-left: 130px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  position: relative;
  float: left;
}

.col-2 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-3 {
  padding-top: 15px;
  padding-left: 130px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  position: relative;
  float: left;
}

.col-3 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}
<footer>


  <div class="col-1">
    Revel
    <hr>
    <span><a href="#" class="footer-links"> About us       </a></span>
    <span><a href="#" class="footer-links"> Contact us     </a></span>
    <span><a href="#" class="footer-links"> FAQ            </a></span>
    <span><a href="#" class="footer-links"> Careers        </a></span>
  </div>

  <div class="col-2">
    Event Host
    <hr>
    <span> <a href="#" class="footer-links"> Why use Revel  </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> Join Revel     </a></span>
  </div>

  <div class="col-3">
    Event Service
    <hr>
    <span><a href="#" class="footer-links"> Why partner with Revel  </a></span>
    <span><a href="#" class="footer-links"> Guidebooks              </a></span>
    <span><a href="#" class="footer-links"> FAQ                     </a></span>
    <span><a href="#" class="footer-links"> Partner with Revel      </a></span>
  </div>


</footer>

Upvotes: 1

Nisarg Shah
Nisarg Shah

Reputation: 14541

Basically you are missing float: left on .col-2 and .col-3. This will bring the third link group to the top. Then, you can set the line-height on .col-3 to ensure that it aligns horizontally with the other two groups.

Also note that in the snippet below I have set a minimum width on the body to ensure that the columns don't wrap.

body {
  min-width: 800px;
}

footer {
  border-style: solid;
  border-color: grey;
  border-width: 0.25px;
  background-color: #EF6248;
  -webkit-box-shadow: 0 5px 10px -6px black;
  -moz-box-shadow: 0 5px 10px -6px black;
  box-shadow: 0 5px 10px -6px black;
  /* NOTE: shadow of footer */
  padding-bottom: 200px;
  margin-top: 10%;
  /* NOTE: where the footer sits on page */
}

.footer-links {
  color: white;
}

.footer-links:hover {
  color: black;
}

.col-1 {
  padding-left: 150px;
  padding-top: 15px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  float: left;
}

.col-1 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-2 {
  padding-top: 15px;
  padding-left: 130px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  position: relative;
  float: left;
}

.col-2 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-3 {
  padding-top: 15px;
  padding-left: 50px;
  padding-bottom: 100px;
  bottom: 100px;
  color: white;
  font-weight: bold;
  display: table;
  float: left;
  line-height: 40px;
}

.col-3 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}
<footer>


  <div class="col-1">
    Revel
    <hr>
    <span><a href="#" class="footer-links"> About us       </a></span>
    <span><a href="#" class="footer-links"> Contact us     </a></span>
    <span><a href="#" class="footer-links"> FAQ            </a></span>
    <span><a href="#" class="footer-links"> Careers        </a></span>
  </div>

  <div class="col-2">
    Event Host
    <hr>
    <span> <a href="#" class="footer-links"> Why use Revel  </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> Join Revel     </a></span>
  </div>

  <div class="col-3">
    Event Service
    <hr>
    <span><a href="#" class="footer-links"> Why partner with Revel  </a></span>
    <span><a href="#" class="footer-links"> Guidebooks              </a></span>
    <span><a href="#" class="footer-links"> FAQ                     </a></span>
    <span><a href="#" class="footer-links"> Partner with Revel      </a></span>
  </div>


</footer>

Upvotes: 0

Rakesh
Rakesh

Reputation: 216

You have defined col-1 and col-3 as float, you need to define col-2 also as float: left. See the code below I modified.

footer {
  border-style: solid;
  border-color: grey;
  border-width: 0.25px;
  background-color: #EF6248;
  -webkit-box-shadow: 0 5px 10px -6px black;
   -moz-box-shadow: 0 5px 10px -6px black;
        box-shadow: 0 5px 10px -6px black; /* NOTE: shadow of footer */
  padding-bottom: 200px;
  margin-top: 10%; /* NOTE: where the footer sits on page */
 }

 .footer-links {
   color: white;
 }
 .footer-links:hover {
   color: black;
 }

.col-1 {
  padding-left: 150px;
  padding-top: 15px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  float: left;
}
.col-1 span{
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-2 {
  padding-top: 15px;
  padding-left: 130px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  position: relative;
  float: left;
}
.col-2 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-3 {
  padding-top: 15px;
  padding-left: 550px;
  padding-bottom: 100px;
  bottom: 100px;
  color: white;
  font-weight: bold;
  display:table;
  float: left;
  positi
}
.col-3 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}
<footer>


    <div class="col-1">
         Revel
             <hr>
      <span><a href="#" class="footer-links"> About us       </a></span>
      <span><a href="#" class="footer-links"> Contact us     </a></span>
      <span><a href="#" class="footer-links"> FAQ            </a></span>
      <span><a href="#" class="footer-links"> Careers        </a></span>
      </div>

    <div class="col-2">
         Event Host
         <hr>
      <span> <a href="#" class="footer-links"> Why use Revel  </a></span>
      <span> <a href="#" class="footer-links"> test           </a></span>
      <span> <a href="#" class="footer-links"> test           </a></span>
      <span> <a href="#" class="footer-links"> Join Revel     </a></span>
    </div>

    <div class="col-3">
        Event Service
       <hr>
       <span><a href="#" class="footer-links"> Why partner with Revel  </a></span>
       <span><a href="#" class="footer-links"> Guidebooks              </a></span>
       <span><a href="#" class="footer-links"> FAQ                     </a></span>
       <span><a href="#" class="footer-links"> Partner with Revel      </a></span>
    </div>


  </footer>

Upvotes: 0

Related Questions