Page Widget How to - Match header and footer width with 100% against pixel based content

Question

We would like to know how to match header and footer width with 100% against pixel based content.

Answer


<!--from   www.jav a 2  s. c o m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.wrapper {
  display: table;
}

.header, .footer {
  width: 100%;
  background: #999;
  height: 200px;
}

.content {
  width: 2500px;
  height: 100px;
  background: #9B191B;
}
</style>
</head>
<body>
  <div class="wrapper">
    <div class="header">this is header</div>
    <div class="content">this is content</div>
    <div class="footer">this is footer</div>
  </div>
</body>
</html>

The code above is rendered as follows: