Div with 100% width inside a centered div with dynamic width? - css

Question

I'm not sure how to make this work crossbrowser-wise, so I need some of your expertise ;)
How do I make styling that looks like this and works crossbrowser-wise? (IE7 as well)
http://imageshack.us/photo/my-images/543/examplek.jpg/
The red box has a fast defined width
The green box is centered inside the red box and has a dynamic width + a padding/border
The blue box is a "mouseover" div which needs to have the same width as the green box (without the padding/border)

Answer 1

Here is one way to achieve this (with a dynamic width for green box): http://jsfiddle.net/nKdt6/
HTML
<div class="outer">
<div class="inner">
<p>
lorem ipsum
<p>
<div>
<p>Blah blah blah</p>
</div>
</div>
</div>
CSS
.outer {
background-color : red;
text-align: center;
width: 500px;
}
.inner {
background-color: lime;
border: 3px black solid;
display: inline-block;
padding: 20px;
*display: inline;
*zoom: 1;
position: relative;
margin: 100px 0;
border-radius: 10px;
overflow: hidden;
}
.inner > div {
display: none;
background-color: aqua;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.inner:hover > div {
display: block;
}
To center the .inner element when it has a dynamic width we can use text-align: center in .outer and display: inline-block in .inner. I have added the extra CSS *display: inline and *zoom: 1 to make this work in IE7 as it does not support display: inline-block.
Edit
To get a thin black outline (outer border) around a wide white inner boder (as achieved and demonstrated by #DonPedro in the comments below), you can add a second border to an inner child element that controls the full height and width of the parent element. In the example above, this is .inner > p.
CSS
.inner {
...
border: 1px black solid;
...
}
.inner > p {
...
border: 10px solid white;
...
}
Working JSFiddle: http://jsfiddle.net/nKdt6/1/ (provided by #DonPedro)
This cannot be achieved using outline due to the border-radius styling, and as far as I am aware Mozilla is the only browser that supports any type of outline radius (-moz-outline-radius).