I have an element like this:

<div id="content" style="border: 2px solid black">
</div>

And through JQuery I add some new stuff:

$("#content").append($('<div></div>').addClass("box"));

where

.box { margin: 10px; padding: 10px; border: 1px solid black }

But the outer div does not resize when I do this, so I get an inner box that is sticking out of a solid outer box. How can I get the outer box to resize itself when I add this inner box?

I have an element like this:

<div id="content" style="border: 2px solid black">
</div>

And through JQuery I add some new stuff:

$("#content").append($('<div></div>').addClass("box"));

where

.box { margin: 10px; padding: 10px; border: 1px solid black }

But the outer div does not resize when I do this, so I get an inner box that is sticking out of a solid outer box. How can I get the outer box to resize itself when I add this inner box?

• javascript
• jquery

Share Improve this question Follow edited Oct 18, 2010 at 1:04 luqui asked Oct 18, 2010 at 0:54 luquiluqui 60.5k1212 gold badges151151 silver badges208208 bronze badges 3

• 2 $("content") is a typo or did you forget to put the #? – Ben Commented Oct 18, 2010 at 1:01
• Just forgot it in my example, not in the actual code. Good eye, though :) – luqui Commented Oct 18, 2010 at 1:05
• Are you doing any floating in your CSS? – Peter Ajtai Commented Oct 18, 2010 at 1:13

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Correct the selector if it's not a typo

$("#content") // id="content" (correct)
$("content")  // tagName = content

And change the display of the div to inline-block

#content {
    display: inline-block;
}

Then the div will not occupy the whole row.

try this:

js

$('#content').append('<div class="box">&nbsp;</div>');

html

<div id="content" style="border:2px solid black;overflow:hidden;">
</div>

I hope his help!

#content is not resizing, since it's width is probably set in your CSS.

Either make it wider, or specifically size it appropriately.

Looks like #content must be over 40px wide, since the inner div has 10 margin and 10 padding, which is 20 on the left and 20 on the right.

So, something like:

$("#content").css("width","100%").append($('<div></div>').addClass("box"));

Or better yet, set up your CSS at the right width to begin with:

#content { width: ... ; }

---

If you are floating .box within #content then set the overflow of #content to auto(or hidden), otherwise the outer box doesn't "see" the floating inner boxes:

#content { overflow: auto; }

In my case I added:

#property { overflow: auto; }

and now size of elements is being recalculated when I show or hide elements.