How to set bottom position of a link inside header

Admin 1
Viewed 375

how can I set position of my link elements to bottom of header?

header {
  height: 200px;
  width: 100%;
  padding-left: 500px;
  background-color: grey;
  border-bottom: solid blue 6px;
}

a {
  display: block;
  float: left;
  width: 125px;
  height: 50px;
  border: solid blue 2px;
  padding-left: 2px;
  border-radius: 15px 15px 0px 0px;
  text-align: center;
  line-height: 50px;
  color: white;
  background-color: black;
}
<header>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</header>

I tried to set bottom: 0; but with no result. I have also tried with margin-top and padding-top but result is different height of header. If I set margin or padding by 200px, I get header higher for 200px.

css-position css html
3 Answers

Just edit css of header to this: 

header{
       height: 200px;
       width: 100%;
       padding-left: 500px;
       background-color: grey;
       border-bottom: solid blue 6px;
    
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: flex-end;
    }

a {
 display: block;
 float: left;
 width: 125px;
 height: 50px;
 border: solid blue 2px;
 padding-left: 2px;
 border-radius: 15px 15px 0px 0px;
 text-align: center;
 line-height: 50px;
 color: white;
 background-color: black;
}
<header>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</header>

user_34912980

First of all you need to set a position for your header, in this case it will be relative.
Second you will have to use a container to keep your links from falling apart. I will call it .menuHolder and this will have all the menu links in side itself.

Then in order to place them at the bottom of header, you need to set an absolute position on your link container. in this case .menuHolder and again; this is because we don't want the links to freely seperate from eachother, we want them to stay in place.

header {
 height: 200px;
 width: 100%;
 padding-left: 500px;
 background-color: grey;
 border-bottom: solid blue 6px;
 position: relative;   /* RELATIVE POSITION ON HEADER TO KEEP ANYYTHING WITH ABSOLUTE POS INSIDE IT */
}

a {
 display: block;
 float: left;
 width: 125px;
 height: 50px;
 border: solid blue 2px;
 padding-left: 2px;
 border-radius: 15px 15px 0px 0px;
 text-align: center;
 line-height: 50px;
 color: white;
 background-color: black;
}

/* A CONTAINER FOR LINKS WHICH WILL KEEP LINK FROM COLLAPSING INTO EACHOTHER*/
.menuHolder {
 position: absolute; /* TO BE ABLE TO FREELY PLACE IT */
 bottom: 0;/* MAKE IT STICK TO BOTTOM */
 display: block;
}
<header>
 <div class="menuHolder">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
 </div>
</header>

user_62129570

If you add position:relative to the header and position:absolute to the link attributes, then the bottom:0 will work as you expect.

header {
  height: 200px;
  width: 100%;
  padding-left: 500px;
  background-color: grey;
  border-bottom: solid blue 6px;
  position:relative;
}

a {
  position:absolute;
  bottom:0;
  display: block;
  float: left;
  width: 125px;
  height: 50px;
  border: solid blue 2px;
  padding-left: 2px;
  border-radius: 15px 15px 0px 0px;
  text-align: center;
  line-height: 50px;
  color: white;
  background-color: black;
}
<header>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</header>

user_39905470
Related