100% DIV width is not really 100%

Question

When I have a

with width: 100%, it is not really 100%:

testtesttesttesttest

...

#di         


        

Answer 1

i most of the time add this bit of code to my css. It should work for you too. yes, 100% width or height is always based on the parent container.

CSS

*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}


#container{
width:100%;
height:100%;
background:gray;
position:relative;
display:block;
}
#content{
height:50px;
width:50px;
bottom:20px;
right:10%;
background:red;
position:absolute;
}

​HTML

    

    
​

OUTPUT