HTML Element Style How to - Layout with a fixed center div surrounded by equally sized fluid divs

Question

We would like to know how to layout with a fixed center div surrounded by equally sized fluid divs.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.grid {<!-- w  ww .ja  v a  2  s . c o  m-->
  width: 100%;
  overflow: hidden;
  height: 4rem;
}

.grid__item {
  display: inline-block;
  height: 100%;
}

.grid .grid__item:nth-child(1) {
  background: rgb(255, 180, 0);
  width: 10%
}

.grid .grid__item:nth-child(2) {
  background: rgb(0, 255, 180);
  width: 79%
}

.grid .grid__item:nth-child(3) {
  background: blue;
  width: 10%
}
</style>
</head>
<body>
  <div class="grid">
    <div class="grid__item">a</div>
    <div class="grid__item">b</div>
    <div class="grid__item">c</div>
  </div>
</body>
</html>

The code above is rendered as follows: