Ensure the minimum height of a <div> tag in Internet Explorer
Being a Microsoft bigot I really love all of Microsoft's products, but I do find IE a real pain. Especially its inconsistencies with CSS.
In an attempt to catch up with my friends and collagues I'm doing more and more development work in pure CSS rather than using long winded hidden tables for structure, but I still have some way to go.
On a recent development project I needed to ensure that a <div> tag had a minimum height of 100px; but the min-height property of the style attribute on a <div> fails to work in IE. After a bit of work I found this solution. I've included the style attribute in the <div> tag but you'll be keeping this in your stylesheet. 
<div>
<div style="height:100px; float : right; width : 1px; z-index: -1;"></div>
</div>
Basically define your <div>, then prop it open with a nested <div> that floats to the right, is 1 pixel wide and sits behind the parent <div>. This will ensure your parent <div> has a minimum height of 100px; and will allow it to grow if the content exceeds this.
| Author |
: Paul Marshall |
| Published |
: 14 June 2006 |
A self confessed Microsoft bigot, Paul loves all Microsoft products with a particular fondness for SQL Server. Paul is currently focusing on Web 2.0 patterns and practices and is always looking for better ways of doing things.
I love the .net platform, and I find it to be the most productive toolset I have used to date.