Inner div overflows the outer as content grows

I have an outer div and inner div and if I do not set outer div min-height, inner div appears outside of the outer, but if I set the height of outer in my css, and the content of inner div grows larger, it overflows the outer div. How can I ensure the outer div grows with the inner div?

    <body>
		<div id="outer">
			<div id="inner">
				<div class="title">
					
					Title here
					
				</div>
				<div class="content"></div>

			</div>
		</div>

	</body>

Open in new window

Here is my css:
    #outer{
  		width:90%;
  		margin:20px auto;
	    height: 200px;
		border: 2px solid red;
        position: relative;
        padding: 0;
		}
		
		#inner{
  			width:98%;
			border: 2px solid green;
            position: absolute;
		}
		
		 #inner .title{
 			width:100%;
  			height:63px;
  			background:#80c0ff;
  			color:#FFF;
            padding-top: 5px;
            border-radius: 2px;
		}
    .clear { clear: both; }


		#inner .content{
	      width: 98%;
	      padding:1% 1%;
  		  background:#FFF;
  		  height:auto;
  		  display:block;
          border: 2px solid orange;
          position: relative;
		}

Open in new window

LVL 35
YZlatAsked:
Who is Participating?
 
Snarf0001Commented:
Can you give any more insight to the final product?
Having position:absolute on the inner div means you'll never be able to have them scale together without javascript, which obviously is far from the ideal way to handle.

If you take the position:absolute OFF of the inner div, and just set the outer to min-height:200px instead of height:200px, they should scale properly.
But I'm guessing there's a reason you need the absolute positioning?
1
 
Peter HartCommented:
try setting the height of the outer div to 100%
0
 
YZlatAuthor Commented:
@chilternPC, when I do that, the inner div "jumps out" of the outer div, and outer div appears as a line on to[p of inner div
0
 
YZlatAuthor Commented:
Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.