Height Of Elements Equal To Height Of

With the code above I create a

consisting of an and a . The and the match perfectly with the height

Solution 1:

Change display property of li to inline-block instead of inline and to solve the overlapping divs, you can use box-sizing: border-box for all the elements.

To remove the space between the lis you can set font-size: 0 to the nav and reset it for the li.

See demo below:

*{
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.image {
  width: 20%;
  height: 100%;
  float: left;
  border-style: solid;
  border-width: 1px;
}

.navigation {
  width: 79%;
  height: 100%;
  float: right;
  text-align: right;
  border-style: solid;
  border-width: 1px;
  font-size: 0;
}

li {
  height: 100%;
  display: inline-block;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
  font-size: initial;
}

<div class="header">

  <div class="image">
    Image
  </div>

  <nav class="navigation">
    <li> 1.0 Main Menu </li>
    <li> 2.0 Main Menu </li>
    <li> 3.0 Main Menu </li>
  </nav>

</div>

Solution 2:

I think you should make "li" display: inline-block to be able to take the full height and make the border-width: 0 because if you make it 1 the "li" will be more height that the nav:

li {
 height: 100%;
 display: inline-block;
 border-style: solid;
 border-width: 0px;
 background-color: blue;
}

Solution 3:

You have to use inline-block instead of inline for the display property for the list element.