making a block filling the full width of its container

How can I make a block filling the fu开发者_运维知识库ll width of its container given the fact both are absolutely positionned, and the inside one has padding.

I've made a JSFiddle: http://jsfiddle.net/dmdBB/

here a sample:

<style>
.containerOut {
    position: absolute;
    width: 400px;
    height: 400px;
    border: thin solid black;
}

.containerIn {
    position: absolute;
    outline: 1px solid red;
    width: auto;

    padding: 4px;
}
</style>
<div class="containerOut">
       <div class="containerIn">
          im not large enough
       </div>
</div>

In this sample, the .containerIn element is too thin. If I set its width to 100%, it would overflow because of its padding.

PS: I would like a CSS solution, I know that placing an intermediate HTML container with 100%width and 0margin/padding/border would solve the problem.

Instead of using width: 100%, you need to use left: 0; right: 0.

To fix the last example, you can use word-wrap: break-word.

See: http://jsfiddle.net/QjdD5/1/

.containerIn {
    width: auto !important; /*just to override your inline CSS */
    left: 0;
    right: 0;
    word-wrap: break-word
}

right:0px;
left:0px;
overflow:hidden;

for the inner element and if you dont want that red border showing on the black border you can use overlfow:hidden for outer div

@biab; padding & border add width to an element. may be you can put in your css:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

http://jsfiddle.net/sandeep/dmdBB/28/

replace...

width: auto;

with...

left:0; right:0;

Tested on chrome