Nested Div Positioning

[wampthing]

I have a parent div and a nested div. As I type in the nested div it expands the parent div.

It stops expanding the parent div once I position the nested div absolute right; (parent div position:relative).

 

I cant figure out how to have the nested div automatically expand the parent div while it is

position: absolute;

right:0;

 

Any Ideas?

I have uploaded a sample of what I am talking about here

Notice that the text in the nested div expands past the backgroundin the parent div.

The parent div is #bottom with the nested div being #content

[TCH-Bruce]

>div#bottom{
  position:relative;
  min-height:500px;
  overflow: auto;
  width:767px;
  background-image:

 

You have your bottom div set to 500px. If you remove that it will grow. Or if you add overflow:auto; you will get a scroll bar to scroll the content.

 

Also, take a look at it with IE. Doesn't even display the content.

[wampthing]

I didnt want to go the overflow route. If I remove the min-height:500px, then the parent dive drops to nothing.

If I remove the position:absolute in the nested div I get a page that looks like this

Notice that the parent div expands like I want it to, but the nested div is no longer in place.

[TCH-Bruce]

Add padding-left: 190px; to this example and it gives you what you want.

[wampthing]

That seems to do it.

Ill goof around with it to see if I can break it!

[TCH-Bruce]

If you get stuck someone here will be sure to help.