My CSS:\[code\] .reviewRow { clear:both; padding-top:0; margin-top:0; } .reviewBlock { float:left; height:100%; padding-top:0; margin-top:0; border-top: 1px solid #444; border-left: 1px solid #444; } .reviewCaption { font: normal normal normal 6pt verdana;padding-left:0.03in; } .reviewText { font: normal normal normal 8pt verdana; height:20px; }\[/code\]My HTML:\[code\]<body><div style="HEIGHT: 30px" class=reviewRow> <div style="WIDTH: 125px" class=reviewBlock> <div id=reviewBeneficiaryType class=reviewText>This text is too big to fit inside a 30px height cell, so I want it to get bigger. </div> </div></div></body>\[/code\]The above HTML is excepted from a web page I'm having trouble with. It is dynamically generated, so the text inside may be short or long. Normally, I would expect that this will render a box 30 pixels tall with the text inside, unless the text is too big, in which case the box will expand to fit the text.The problem is that when this HTML appears within another page, the text "spills out" of the box. I don't understand what the problem is. To make matters more complicated, if I remove the "height" style, it will actually make the box much taller.I have looked at the MDN documentation. It clearly says that by default, the value of CSS "overflow" is "visible", in which case the text "may spill out", but under no circumstances do I want scrollbars to appear.I have tried modifying the "position" CSS of the containing elements, but that doesn't seem to do anything.What could be causing the problem here?
I can't get the height of my HTML element set correctly with CSS
- Thread starter JanethD
- Start date