html - Filling overlapping child divs to parent div content area -


i have parent div element has padding , defined border-box styling. trying nest multiple, overlapping child divs inside parent element , have child divs fill parent container, content part of parent container's box model.

the problem having top , left absolute positioning of child divs being calculated browser correctly, height , width remains same total height , width of parent div, not height , width of content portion.

this css have tried not working:

* {     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;     box-sizing: border-box; } .container {     width: 300px;     height: 60px;     padding: 25px 12px 12px;     border: thin solid red;     position: absolute; } .layer {     width: 100%;     height: 100%;     position: absolute;     float: left;     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;     box-sizing: border-box; } 

please see jsfiddle example of trying do: http://jsfiddle.net/dwp1v0uu/

if inspect "container" element, see 300px 60px in total, content portion 274px 21px. each of nested child divs 298px 58px, want them closer 274px 21px size.

could not specify positioning of child same padding?

(p.s. don't need float if position absolute)

.layer {     top: 25px;     right: 12px;     bottom: 12px;     left: 12px; } 

Comments

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

jquery - Clone last and append item to closest class -

c - Unrecognised emulation mode: elf_i386 on MinGW32 -