We help IT Professionals succeed at work.

DIV content larger than div space, but div not expanding

3,489 Views
Last Modified: 2013-11-19
I have several layers that have images and forms in them.  The CSS is setup to give each layer a background color and border.  

When the content, images and forms, is greated than the div it renders itself outside of the div.  How do I get the div to expand it's height and width with the contetn so that the background stays and all of the contetn is displayed within div borders?

For instances if I put content in a table cell it will automatically expand with the images and form fields.  How can I set a layer to do this?
Comment
Watch Question

Commented:
This sounds like it could be one of those browser specific problems. Can you give a little more information. What browser is the problem appearing in? does it do the same thing is other browsers? Can you post the CSS styles that define these divisions?
Top Expert 2007

Commented:
Did you give the container div a width/height?  A div will usually expand to 100% of the available width, and according to your description, it doesn't do that, so I guess you've either specified a width or there are other elements keeping the div from expanding.
If dimensions are specified, keep in mind that while IE6 will treat e.g. "width" like "min-width" (which it doesn't support) and expand the container if necessary, Firefox for example will (correctly) stick to the specified width, regardless of content. For FF to expand the div with the content, you would have to use min-width instead of width.
Or are the contained elements floated or absolutely positioned?

>Can you post the CSS styles that define these divisions?
And the relevant HTML too...

Author

Commented:
I am setting heights and widths, so the content expands but the background and border does not which suggests that the div is not.  How would I shape something like this to expand with the content?

#Content {
    width:600px;
    height: 200px;
    background-color: #CCCCCC;
    border: solid 2px #999999;
   margin-right: auto;
    margin-left: auto;

}
It sounds like the box you are specifying is too small for the content.  Because you've specified both height and width, you are having problems.  The behaviour you are seeing sounds like a browser issue.

Try adding the style "overflow: hidden;" to see if this demonstrates the actual size of the box, and to see that the background fills this box, which it should.  If you need to allow the box to expand vertically, consider not putting a height style on the div.

Commented:
I have question where I will make an assumption.

Is this problem in all browsers or only in some browsers? for example, does the division resize itself in IE6 but not in FireFox?

The following code assumes that this problem is in FireFox and that you wish to have this division have the minimum height and width of those in your CSS and that you do want the division to automatically expand to fit any content that is too large.
/* Leave your original css as is */
#Content {
  width:600px;
  height: 200px;
  background-color: #CCCCCC;
  border: solid 2px #999999;
  margin-right: auto;
  margin-left: auto;
}
 
/* add the following
   note that this assumes that the parent element of 
   #content is body
   This causes FireFox and other Browsers that comply with
   CSS standard to ignore the height and width above
   but does not effect IE6 as IE6 does not understand the
   Child Selector (>)
*/
body>#Content {
  width: auto;
  height: auto;
  min-width:600px;
  min-height: 200px;
}

Open in new window

Top Expert 2007
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Is there a good explanation of how CSS value auto works with height, and margins, and wherever else you use it.  I am not sure exactally how it works, but it does
Top Expert 2007

Commented:
The safest workaround I think would be to use conditional comments.
   (see e.g.  http://www.quirksmode.org/css/condcom.html )


For all browsers:

<style>
#Content {
    min-width:600px;      
    min-height: 200px;

    background-color: #CCCCCC;
    border: solid 2px #999999;
    margin-right: auto;
    margin-left: auto;
}
</style>


Overwrite for IE6:

<!--[if IE 6]>
<style>
   width:600px;
    height: 200px;    
</style>
<![endif]-->
Top Expert 2007

Commented:
Sorry, I posted before your last comment.

So, let's take this example:

    min-width:600px;
    width:auto !important;
    width:600px;


First, you set the min-width, for the browsers that support it, e.g. FF.

Then you define
  width:auto !important;
which will override (for browsers like FF) the width value in the next line ("!important" takes precedence even over later rules for the browsers that support it).
"width:auto" tells the browser to expand with the content (but remember, we have set a min-width for these browsers already).

Last we set the width for IE6 (IE6 does not understand the "!important" directive, so this width setting will be valid...)

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.