Div longer than 100% - html

Question

HTML:
<div id="wrap">
<div id="main">
<p id="title">home</p>
</div>
</div>
CSS:
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
height:100%;
margin:0;
padding:0;
}
#wrap {
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #0662BF));
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #0662BF 100%);
height:100%;
padding:0;
margin:0;
}
#main {
height: 100%;
margin-right: 15%;
margin-left: 15%;
border-right: 1px solid gray;
border-left: 1px solid gray;
padding: 0px 15px 15px 15px;
background-color: #FFFFFF;
text-align: center;
}
I feel dumb asking questions like this because I feel like the answer is extremely simple, but my main div is longer than the wrap and I don't understand why. I could just make the main div shorter so it matches the wrap, but I want to do it properly.
JSFiddle

Answer 1

Your #main-div has a padding of 15px on the bottom.
Add this to your css:
padding: 0;
Or better modify your css-code from padding: 0px 15px 15px 15px; to
padding: 0px 15px 0px 15px;
See your updated fiddle here: http://jsfiddle.net/k7tRy/

Answer 2

Because of padding.
Remove bottom padding, or add to #main
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Answer 3

Your div #main have some padding-bottom.
In your Css class : padding: 0px 15px 15px 15px;.
It means :
padding-top: 0px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
And your div takes more than 100% because of padding property.
(Padding: Padding is extra space inside the control.)
You should/can use margin instead of padding.

Answer 4

<style>
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
height:100%;
margin:0;
padding:0;
}
#wrap {
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #0662BF));
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #0662BF 100%);
height:100%;
padding:0;
margin:0;
}
#main {
height: 100%;
margin-right: 15%;
margin-left: 15%;
border-right: 1px solid gray;
border-left: 1px solid gray;
<!-- Check the change -->
padding: 0px 15px 0px 15px;
background-color: #FFFFFF;
text-align: center;
}
</style>
<div id="wrap">
<div id="main">
<p id="title">home</p>
</div>
</div>
I agree to the above developers. It just because you are giving an extra padding at the bottom of your main div.
Just for the caution, always check the conventions while coding:
padding: top-padding, right-padding, bottom-padding,left-padding.
(Just to remember: it works in a clockwise fashion)
Hope it helps. Happy Coding :)