SeamusPotter SeamusPotter - 24 days ago 11
CSS Question

I'm having trouble making a button

I'm practicing my HTML by making a website, and I'm making a header with buttons.
I'm trying to make the button the full height of the header, but it's going out of the header for some reason, and not going to the top.



#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
display: inline-block;
margin-top: 20px;
}

<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
<a href="index.html">Home</a>
</div>
</div>




Answer

You can reset the vertical-align(defaut is baseline) value on inline-block elements whenever needed. here vertical-align:top; will do fine :

#header {
  background-color: #1564B3;
  color: #fff;
  height: 70px;
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0%;
}
#header-a {
  width: 100px;
  background-color: #555555;
  display: inline-block;
  text-align: center;
  margin-top: 0px;
  height: 100%;
  vertical-align:top;
}
#header-h {
  display: inline-block;
  margin-top: 20px;
}
<div id="header">
  <h2 id="header-h">Header text</h2>
  <div id="header-a">
    <a href="index.html">Home</a>
  </div>
</div>

For a to cover the div, you may also use height or eventually line-height:

#header {
  background-color: #1564B3;
  color: #fff;
  height: 70px;
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0%;
}
#header-a {
  width: 100px;
  background-color: #555555;
  display: inline-block;
  text-align: center;
  margin-top: 0px;
  height: 100%;
  vertical-align:top;
}
#header-a a {
  display:block;
  line-height:70px;/* will size it up to 70px height for each line */
  }
#header-h {
  display: inline-block;
  margin-top: 20px;
}
<div id="header">
  <h2 id="header-h">Header text</h2>
  <div id="header-a">
    <a href="index.html">Home</a>
  </div>
</div>

Comments