Forum Moderators: not2easy
Example:
<html>
<head>
<style>
#test {
width: 150px;
height: 100px;
border: 1px #ff0000 solid;
}
</style>
</head>
<body>
<div id="test">
Test
</div>
</body>
</html>
i want the div's height to be exactly 100px in height if the content is as small as that but how can I make that div expand if the content increases? if I specify the height, the text overlaps the div..
Thanks
hope this helps :)
Try this.....
<style>
#test {
width: 150px;
height: 100px;
overflow:auto;
border: 1px #ff0000 solid;
}
</style>
the overflow: auto; would only put a scroll bar on the div, it doesn't change the height of the div.
CodilX,
hmm... i don't want to assign the height as auto because I want the div 's height to remain at 100px when the div has small content.
Thanks for all your reply. Appreciate.
Marshall
width: 150px;
height: 100px;
min-height: 100px;
overflow:auto;
border: 1px #ff0000 solid;
It's ok.. it worked on Firefox. not on IE. Thanks. It a good start. I'll look for another alternative for this min-height for IE. Thanks..
min-height:500px;
height:auto;
height:500px;
It is a whacky hack but it seems to work.
Thanks all for the reply.
min-height doesn't work on IE.
tested: Firefox 2.0.0.7, IE6, Safari
This is the source:
<html>
<head>
<style>
#test {
border:1px solid #f00;
min-height:100px;
height:auto;
}
/* for Internet Explorer */
/*\*/
* html #test {
height: 100px;
}
/**/
</style>
</head>
<body>
<div id="test">
Test
</div>
</body>
</html>
min-height should be the solution for all.. maybe one day
Put a 1px wide by 100px high <div> in the div that contains the text and float it right.
<div id="content">
<div style="width: 1px; height: 100px; float: right;">
<p>text text text.............</p>
</div>
It is along the same principle of using an image to force cell height.
Marshall
Problem: IE doesn’t accept
min-heightheightWorkaround: Thankfully, IE does not set
heightmin-heightSolution: You should really put IE-specific code in a conditional comment that only affects IE 6, since IE 7 correctly accepts
min-height<head>
<style type="text/css">
#container { min-height: 100px; }
</style>
<!--[if IE 6]>
<style type="text/css">
#container { height: 100px; }
</style>
<![endif]-->
</head>And that’s all you need to know :)
Thanks...
This one looks clean... I'll be using this one...
Thanks again Guys... :D
