Page Widget How to - Create full width header

Question

We would like to know how to create full width header.

Answer


<!--from  ww w.j  a  v a2  s  .  co  m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

header, footer {
  height: 50px;
  background-color: yellow;
  text-align: center;
}

#Container, #Content {
  height: calc(100% - 50px);
  overflow: auto;
}

#Left, #Right {
  height: 100%;
}

#Left {
  float: left;
  background-color: black;
  color: white;
}

#Right {
  overflow: auto;
}
</style>
</head>
<body>
  <header> Header </header>
  <div id="Container">
    <div id="Left">left menu</div>
    <div id="Right">
      <div id="Content">Content</div>
      <footer>Footer</footer>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: