Solved

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

Posted on 2010-08-23
25
479 Views
Last Modified: 2012-05-10
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?
0
Comment
Question by:Blowfelt82
  • 9
  • 7
  • 6
  • +1
25 Comments
 
LVL 3

Expert Comment

by:Aidiakapi
ID: 33501872
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
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 33501881
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
 
LVL 19

Expert Comment

by:daveamour
ID: 33501923
Does this work?

<div style="overflow:auto;border-width:1px;border-style:solid; max-height: 80px; float:left; min-width: 200px;">
0
 

Author Comment

by:Blowfelt82
ID: 33501970
doesnt look like max-width etc work in my browser. Is this a JavaScript issue?
0
 
LVL 19

Expert Comment

by:daveamour
ID: 33502012
Did my suggestion not work?
0
 

Author Comment

by:Blowfelt82
ID: 33502020
No sorry,it seems all the max-height styling options etc arnt supported in my browser.
0
 
LVL 19

Expert Comment

by:daveamour
ID: 33502028
Which browser?
0
 

Author Comment

by:Blowfelt82
ID: 33502043
IE6 SP3
0
 
LVL 19

Expert Comment

by:daveamour
ID: 33502044
Ps this is all CSS - no Javascript involved
0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 33502052
it won't work with IE6, it isn't supported. One more reason IE6 needs to go away.
0
 
LVL 19

Expert Comment

by:daveamour
ID: 33502073
I just tested it on IE6 SP3 and it works fine
0
 
LVL 19

Expert Comment

by:daveamour
ID: 33502080
Pleae check you copied my div exactly including the float: left
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:Blowfelt82
ID: 33502106

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
 
LVL 3

Expert Comment

by:Aidiakapi
ID: 33502128
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
 

Author Comment

by:Blowfelt82
ID: 33502137
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
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 33502265
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
 

Author Comment

by:Blowfelt82
ID: 33502375
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
 
LVL 3

Accepted Solution

by:
Aidiakapi earned 500 total points
ID: 33502380
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
 

Author Comment

by:Blowfelt82
ID: 33502587
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
 
LVL 3

Expert Comment

by:Aidiakapi
ID: 33502674
Either add: max-height: 200px;
Or set a fixed height, like this: height: 200px;
0
 

Author Comment

by:Blowfelt82
ID: 33502685
Your example was using the 'height' option, and I tried the max-height but still no luck?
0
 
LVL 3

Expert Comment

by:Aidiakapi
ID: 33502720
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
 

Author Comment

by:Blowfelt82
ID: 33502842
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
 
LVL 3

Expert Comment

by:Aidiakapi
ID: 33502867
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
 
LVL 3

Expert Comment

by:Aidiakapi
ID: 33702125
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

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now