Solved

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

Posted on 2010-08-23
25
483 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Given a github repo find email address of all collaborators in that repo 1 35
TypeError jquery issues with site - CSS conflicts 3 28
selected value 16 26
Ajax on ASP 2 39
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 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