CSS Help Needed

I used these code below to define two settings in css

#main{
	height:auto;
	width: 100%;
	border-color: black;
	border: 2px;
	border-style: solid;
#mainleft{
        height:auto;
	width: 190px;
	float:left;
	border: 1px;
	border-style: solid;
	border-color: black;
}

Code (markup):

Then I used these code in html page which produce 2 boxes.

<div id="main">
<div id="mainleft">
KKKK
<br>
<br>
<br>
<br>
<br>
KKKKK
</div>
Zahid
<br>
<br>
<br>
<br>
Zahid
</div>

Code (markup):

Now I want to put the box mainleft in main so the height of main changes with the height of mainleft.How can I do it?

 

#main{
	height:auto;
	width: 100%;
	border-color: black;
	border: 2px;
	border-style: solid;
#mainleft{
        height:auto;
	width: 190px;
	float:left;
	border: 1px;
	border-style: solid;
	border-color: black;
}

HTML:

The above syntax is wrong as you did not close #main (No closing } )

To extend #main div, add overflow: auto; property to #main

 

Here's an article about various ways of auto-height nested divs:

http://gtwebdev.com/workshop/floats/enclosing-floats.php

Code (markup):

Btw, I got to know this from Stomme poes.