Hi, I am trying to set the height of a <div> with CSS using % as the unit. I've got the height working when defined as 30px but when I change it to 30%(or any value %) the <div>'s border doesn't respond (and the bottom side of the border ends up hugging the bottom side of the text in the <div>!?).
The CSS and XHTML is as follows:
As appears in the external CSS file:
border:2px solid gray;
height:30%; /* This doesn't change the height as I thought. If I change this to use px units the height works fine so why not %? */
As appears in the XHTML file:
This is the static box.
The CSS width property for the <div> works well using %. I can't understand why the height for the <div> specified as a % doesn't work similarly!
I am using Internet Explorer 7 and am using the Transitional DOCTYPE.
If you have any ideas why this doesn't work and how I could get it to work it would be great to hear from you! Thanks.