This morning I started creating and testing a new CSS website template for one of my pending projects. After creating the CSS stylesheet and basic HTML page with DIV’s my content container and footer are not being displayed as they should. For the content div container I assigned CSS property “min-height=400px;”. Using of min height of 400px the website will have nice overview instead depending on the content I enter in the container. The result:

The screenshot was made in Internet Explorer and I checked all my html and css code and everything looks fine. I opened Firefox and opened same URL and the page was displayed as it should be 400px for the content container ;). I am new in the web devolvement and trying to get the basics but this is one example when working with different browsers. Internet Explorer ignores “min-height” and always assign it 8em if the container doesn’t contain data. To fix this problem you will need to define addition CSS declaration for the container.

• div#content {
     min-height: 400px;
  }
• * html div#content {
  height: 400px;
  }

or use another solution

• div#content {
     min-height: 400px;
     height:auto !important!;
     height:400px;
  }

Wow this fixed my first problem.