asked on

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