By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

The Header and Footer Cut Problem

How to solve the problem, where narrowing the browser window messes up the header and footer width.

Edited: 2011-05-04 07:04

There is a problem which many beginners run into at one time or the other, this is what we would call "The Header and Footer Cut Problem".

When a user resizes the browser window, the header or footer might not fill the entire window. This is mainly due to other elements on the page, but can be overcome by applying a min-width.

The Solution

A lot of Web Designers doesn't even know about the solution. Which is to simply attach a min-height on both their main wrapper, as well as their header and footer.

Header 100% width example

The following is just a simple example with a header, and division which represents the page content.

<!DOCTYPE html>

    <title>Header and Footer Cut Problem Resolved</title>

    <style type="text/css">
* { margin: 0; padding: 0; text-align: center; }
.S1 {
  min-width: 668px;
#Header {
  width: 100%;
  height: 140px;
  background: gray;
#Basement {
 width: 75%;
 max-width: 1600px;
 margin: 0 auto;
 text-align: left;
 min-height: 550px;
 background: silver;


   <div id="Header" class="S1"></div>
   <div id="Basement" class="S1">


Brugbart Vision!

Another Solution

For the sites that only include a header, it would also be possible to simply attached the background to the HTML body element instead, this would ensure that the background is repeated cross the entire width of the page, even when narrowing the browser, and the scroll bar appears.

Why even fix it?

Its considered bad design. The layout should not break, not even when narrowing the browser window.