Question

Hi I am trying to make a DIV to apply total window size with 5px margin but there is some problem with margin property in my code..

.outer
{
  background-color:white;
  margin-left:-5px;
  margin-right:-5px;
  margin-top:-5px;
  margin-bottom:-5px;
  height:400px;
  width:100%
}

Above is my CSS code.. Please help me..

This DIV need to occupy the total height and width of the screen/window size with 5 px margin.

Answer 1

First of all you probably need to set the css elements html and body to a height and width of 100%. Since they wrap the entire page, the contents in the page cannot include the whole screen if they don’t.

Second it’s not really a good idea to use margin when working with percentages. If you fit a div element with a size equal to the screen and then gives it a 5px margin the width in total will be 100% + 5px. That would make it bigger than the screen itself. Why not use padding instead? (See W3’s page on the box model) My suggestion would thus be something like this:

html, body, .outer { height: 100%; margin: 0; width: 100%; }
.outer {
 padding: 5px;
}