How to remove the gap between div in html?

Question

I am stuck with this problem and not able to come out of this. Please help me.

In my webpage, I have used 3 divs inside a container div.I am trying to remove the unwanted gap between the div.

• (1)Top bg image
• (2)Middle bg image
• (3)Bottom bg image

I am trying to adjust these 3 divs so that it can look like one bg image. My middle part and bottom part are adjusted completely but top part and middle part have some gap in between that i am trying to remove but not able to.

Please refer to the image which i have attached here which shows the gap between top and middle part.Please refer the stylesheet data I had used for placing the images.

Thanks in advance.

#main_container {
    background-repeat:no-repeat;
    width:645px;
    float:left;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
}
#middle_part {
    background-image: url('/DiscoverCenter/images/apps_mid.png');
    background-repeat:repeat-y;
    width:645px;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#top_part {
    background-image:url('/DiscoverCenter/images/apps_top.png');
    width:645px;
    top:0px;
    height:47px;  /* actual height of the top bg image */
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#bottom_part {
    background-image:url('/DiscoverCenter/images/apps_btm.png');
    width:645px;
    height:24px; /* actual height of the bottom bg image */
}

Answer 1

Have you considered using a reset?

* {
    padding: 0px;
    margin: 0px
}

Add that to the top

However, while we are on the subject: Are you using images to get rounded corners? You can use CSS to get rouned corners nowadays!

Here is a website which can help with those:

http://www.css3.info/preview/rounded-border/