Solved

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

Posted on 2010-08-23
25
487 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 

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
 

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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

636 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