how to make the div fits all of it's width? - css

Question

i have a html div that is styled with css, this div contains some data(a string), and although setting the div width the same as the width of another div (25%) but the div only wraps the text that is written inside it while the other div fits the specified area perfectly.
the div with the problem :
.item_name {
background-color: #F30;
position: absolute;
height: 15%px;
width: 25%px;
background-repeat: repeat;
background-position: center center;
top: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
line-height: 35px;
color: #FFFFFF;
}
the other div:
.item_block {
background-origin:content-box;
background-color:#FFECC1;
height: 20%;
width: 25%;
line-height: 450px;
font-family: Arial, Helvetica, sans-serif;
text-indent: 0px;
vertical-align: middle;
text-align: center;
position: relative;
float: left;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
here's a JSfiddle contains my code

Answer 1

I think this has got to be the problem :
height: 15%px;
width: 25%px;
in class .item_name
Change it to
height: 15%;
width: 25%;
and add this to you css :
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
this should do pretty much as the parent element has dimension set, child will inherit it in %age!!