随着广告的增加，网页的高度不会增加，它会与容器重叠

Question

I am fetching ads name from the database and populating in my webpage but as it increases it overlaps the container. I need to increase the div container as ads increases in ads_container and vice versa.

My PHP Code for the webpage is

<div id="ads_container">

            <?php
                //current URL of the Page. cart_update.php redirects back to this URL
                $current_url = base64_encode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
                $results = $mysqli->query("SELECT * FROM ads ORDER BY ad_id ASC");
                if ($results) { 
                //fetch results set as object and output HTML
                while($obj = $results->fetch_object())
                {
                    echo '<div class="ads">'; 
                    echo '<div class="ad"><img src="images/'.$obj->ad_img_name.'"></div>';
                    echo '</div>';
                }

            }
            ?>



        </div><!-- End of div ads_container -->

My CSS code

/* default marging and padding of website */
*{
margin:0px;
padding: 0px;
}

#container{
width:900px;
height:auto;
background:#CCCCCC;
margin-right:auto;
margin-left:auto;
position:relative;
}

/* HEADER SECTION */
#mainheader{
width:900px;
height:70px;
background:#00001F;

}

#logo{
padding:10px;
width:149px;
height:38px;
float:left;
background:url(../images/flipkart_india-b1a41241.png);
background-repeat:no-repeat;
background-position:center;
}

#cart{
float:right;
margin:15px 30px 10px 10px;
background:#FFCC00;
padding:8px 20px 8px 20px;
border-radius: 8px;
}

#cart a{
text-decoration:none;
text-align:center;
color:#003399;
text-shadow:#FF0000;

}

#subheader{
width:900px;
background:#003333;
height:50px;
}

#header ul{
padding:10px;
list-style:none;
}

#header ul li{
padding:10px;
float:left;
width:150px;
text-align:center;
}

ul li a{
text-decoration:none;
color: #FFFFFF;
}


#electronics ul{
list-style:none;
}
#electronics ul li{
background:#003333;
color:#fff;
}
#electronics ul li:hover{
background:#555;
}

#header ul li li a{
text-decoration:none;
color:#fff;
}

/* BODY SECTION */
body{
font-family:Arial, Helvetica, sans-serif;
}
#content{
padding: 0px;
width:900px;
position:relative; 
height:auto;

}


#main{
margin:10px;
width:670px;
float:left;
height:auto;
}

#slider_header{
width:670px;
height:80px;
margin: 10px;
}

#slider1{
margin:0px 10px 10px 10px;
width:671px;
height:300px;
overflow:hidden;
background-image:url(../images/small-loader.gif);
background-repeat:no-repeat;
background-position:center;
}

#slider1 img{
display: none;
}

#ads_container{
    clear:both;
    width:170px;
    background-color:#CCCCCC;
    border:1;
    border-color:#000000;
    position:absolute;
    top:0px;
    right:0px;
    margin:10px;
    padding:10px;
    height:auto;
}

.ads:hover{
border:1px solid #000000;
}

Answer 1

Remove the absolute position on your div, and put a float on instead. Also remove the clear:both;

#ads_container {
  width: 170px;
  background-color: #CCCCCC;
  border-color: #000000;
  top: 0px;
  right: 0px;
  margin: 10px;
  padding: 10px;
  height: auto;
  float: right;
}