Page Widget How to - Style a header with left/right elements

Question

We would like to know how to style a header with left/right elements.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {<!--   w ww.  j  a  v  a2 s. co  m-->
  height: 100%;
  width: 100%;
  font-size: 13px;
}

.parent {
  background-color: grey;
  height: 20%;
  line-height: 1.6em;
  font-size: 1.6em;
  min-height: 1.6em;
  position: relative;
}

.left, .right {
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
}

.left {
  background-color: yellow;
  padding-left: 20px;
  left: 0;
}

.right {
  background-color: red;
  padding-right: 20px;
  right: 0;
}
</style>
</head>
<body>
  <div class="parent">
    <div class="left">Blah left</div>
    <div class="right">Blah right</div>
  </div>
</body>
</html>

The code above is rendered as follows: