Web design: CSS min-height in Internet Explorer

This morning I started creating and testing a CSS website template for one of my pending projects. After creating the stylesheet and a basic HTML page with divs, I found that the content container and footer were not displayed as intended. I had assigned "min-height=400px;" to the content container so that the layout would have a minimum height of 400px, rather than depend entirely on its content.

This was the result:

I took the screenshot in Internet Explorer. I checked the HTML and CSS, and everything looked correct. When I opened the same URL in Firefox, the content container was displayed at 400px as intended. I am new to web development and still learning the basics; this was an example of the differences between browsers.

Internet Explorer ignores "min-height" and assigns 8em when the container has no content. To fix this, define an additional CSS declaration for the container:

1
2
3
4
5
6

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

Or use this alternative:

1
2
3
4
5

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

That fixed my first problem.