Control a <DIV> elements size to fit dynamic content.

I have a <DIV> element in HTML that I want to dynamically populate. What I want is to be able to expand this <DIV> element to fit the dynamic content. At the moment I am using the following code (which fulfills part of my needs)...

<div style="overflow:auto;border-width:1px;border-style:solid>

</div>

This works in that whatever content I put within the <DIV> the the border fits the content. This is where I run into a problem, I want the <DIV> to have a minimum horizontal size e.g. 200px - this is purely for display purposes, but I still want the horizontal size to expand if the content exceeds this? I also want the same effect with the vertical size of the <DIV> element with the additional exception that the size should never exceed a given size e.g) 80px.

Does anyone know how to acheive this?
Blowfelt82Asked:
Who is Participating?
 
AidiakapiCommented:
Blowfelt82, min-height and min-width work.
The *hack* for IE6 makes the height and width static if min-height and min-width don't work.

Here's a worked out example:
<html>

<head>
<title>Test</title>
<style type="text/css">
.autosize
{
    min-height: 80px;
    min-width: 200px;
    height: auto !IMPORTANT;
    width: auto !IMPORTANT;
    /* WORKAROUND FOR OLDER BROWSERS */
    /* MAKES HEIGHT AND WIDTH FIXED  */
    height: 160px;
    width: 400px;
}
</style>
</head>

<body>
<div class="autosize">
<!-- DYNAMIC CONTENT HERE -->
</div>
</body>

</html>

Open in new window

0
 
AidiakapiCommented:
CSS can solve this for you, these properties can be set:
min-width: 200px;
min-height: 80px;
max-width: 800px;
max-height: 500px;

So you're div would look like:
<div style="overflow:auto;border-width:1px;border-style:solid;min-width:200px;min-height:80px;">

</div>

Open in new window

0
 
jrm213jrm213Commented:
Hi,

Unfortunately I don't believe what you want is possible in all browsers so it would only work for some people.

The CSS that you could use is:


<style type="text/css">
min-height: 200px;
min-width: 200px;
</style>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
daveamourCommented:
Does this work?

<div style="overflow:auto;border-width:1px;border-style:solid; max-height: 80px; float:left; min-width: 200px;">
0
 
Blowfelt82Author Commented:
doesnt look like max-width etc work in my browser. Is this a JavaScript issue?
0
 
daveamourCommented:
Did my suggestion not work?
0
 
Blowfelt82Author Commented:
No sorry,it seems all the max-height styling options etc arnt supported in my browser.
0
 
daveamourCommented:
Which browser?
0
 
Blowfelt82Author Commented:
IE6 SP3
0
 
daveamourCommented:
Ps this is all CSS - no Javascript involved
0
 
jrm213jrm213Commented:
it won't work with IE6, it isn't supported. One more reason IE6 needs to go away.
0
 
daveamourCommented:
I just tested it on IE6 SP3 and it works fine
0
 
daveamourCommented:
Pleae check you copied my div exactly including the float: left
0
 
Blowfelt82Author Commented:

I tried the following, the <DIV> did not have a max-height restriction in my browser and also did not have a minimum width applied?

<div style="overflow:auto;border-width:1px;border-style:solid; max-height: 80px; float:left; min-width: 200px;">
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
<div>
0
 
AidiakapiCommented:
I've tested the min-width, and min-height, they all work for me. I don't run IE6 tough, but it works in:
IE7, IE8
FireFox
Safari
Chrome
Opera
Flock
SeaMonkey

I haven't tested it in Netscape so I can't really tell you if it works there.

And it's pure CSS.
0
 
Blowfelt82Author Commented:
It doesnt necessarily have to be a <DIV> but I would like whatever the solution is to have this functionality and to be styled the same if that helps?
0
 
jrm213jrm213Commented:
my understanding is IE6 doesn't support this but apparently there is a kind of hack that you can put in place: http://www.dustindiaz.com/min-height-fast-hack/

try the following, you can also try it with the float: left; in there if you want

I don't have IE6 to try this but this is supposedly a workaround.

<div style="overflow:auto;border-width:1px;border-style:solid;min-width:200px; width:auto !important; width:200px;">
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
 A<br />
</div>

0
 
Blowfelt82Author Commented:
When I try this code it seems the width style attribute is defining the width, if I exceed that size with content then the width does not expand to fit the content, also this does not have any handling for the vertical sizing which is equally important?
0
 
Blowfelt82Author Commented:
Ok, I took this example as is and just added some border styling so I could see what was happening. When I tested this the width worked as expected (it had a minimum size that did not change - even if the content was smaller than this width). But the height is not giving me the same behaviour, the height of the div expands to fit whatever content. I would like this to have a maximum height?

0
 
AidiakapiCommented:
Either add: max-height: 200px;
Or set a fixed height, like this: height: 200px;
0
 
Blowfelt82Author Commented:
Your example was using the 'height' option, and I tried the max-height but still no luck?
0
 
AidiakapiCommented:
The height option was a workaround for IE6.

Here an update of the example with a fixed height:
<html>

<head>
<title>Test</title>
<style type="text/css">
.autosize
{
    height: 160px; /* FIXED HEIGHT HERE */
    min-width: 200px;
    width: auto !IMPORTANT;
    /* WORKAROUND FOR OLDER BROWSERS */
    /* MAKES HEIGHT AND WIDTH FIXED  */
    width: 400px;
}
</style>
</head>

<body>
<div class="autosize">
<!-- DYNAMIC CONTENT HERE -->
</div>
</body>

</html>

Open in new window

0
 
Blowfelt82Author Commented:
Ok, Ive got some progress...

I have the following...

<div style="min-height:150px;min-width:200px;height:auto;width:auto;width:280px;height:150px;border-width:1px;border-style:solid;">

</div>

When I put too much content into the <div> what I am getting is a border sized correctly, but any content exceeding this is still shown as if the border isnt controlling the bounds of the data?
0
 
AidiakapiCommented:
What I'd do is add scrollbars if there's too much, another option is to simply cut of the rest.

How this is achieved is by adding the overflow property.
Your div would then look like:
For scrollbars:
<div style="min-height:150px;min-width:200px;height:auto;width:auto;width:280px;height:150px;border-width:1px;border-style:solid;overflow:auto;">

</div>

For cutting of everything outside:
<div style="min-height:150px;min-width:200px;height:auto;width:auto;width:280px;height:150px;border-width:1px;border-style:solid;overflow: hidden;">

</div>

Open in new window

0
 
AidiakapiCommented:
Yay, thx, another month of free unused membership.
(Only question I asked since I re-earned it wasn't answered :(, but I'm just happy that in case I need it, I have it.)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.