CSS default width prior to selector - html

Question

Is there any way to set a default width for a group of divs, but then change each width regardless of order in just CSS? Example JSFiddle is at http://jsfiddle.net/RfHSA/.
I'm attempting to have each div set to width:20%, but then upon the mouse hovering one of the inner divs, the specific div hovered over should be set to width:72% and the others set to width:7% (including ones that occur prior to it in the HTML structure). Is this possible with just CSS, or is Javascipt/jQuery required?
Edit: Example of what I'm trying to achieve is here: http://www.kriesi.at/themes/newscast/

Answer 1

I'd like to recommend an easy solution to your need: http://jsfiddle.net/linmic/qcnmu/1/
We simply apply display: table to the "listwrapper" and display: table-cell to the "outerbox", then everything works perfectly.
Cheers

Answer 2

You were 99% there: http://jsfiddle.net/RfHSA/2/
.featuredwrapper {
width:100%;
height:350px;
margin:auto;
background-color:rgba(0,0,0,0.5);
padding-top:12px;
position:relative;
}
.listwrapper {
width:95%;
max-width:1100px;
height:325px;
margin:auto;
position:relative;
}
.listwrapper:hover .outerbox {
width:7%;
}
.outerbox {
width:20%;
height:100%;
display:inline-block;
background-color:#e8e8e8;
margin-left:-4px;
box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
-webkit-transition: width .3s ease-out;
}
.listwrapper:hover .outerbox:hover {
width:72%;
}
.outerbox:first-child{
margin-left:0px;
}
.hoveractive {
position:absolute;
width:95%;
height:325px;
z-index:1000;
padding-top:12px;
}
I minimally fixed them all errantly closing, I think the remaining problems related to decimal widths associated with % widths...

Answer 3

http://jsfiddle.net/RfHSA/15/
Here's a working version of your script. You definitely need some javascript manipulation here to make it work. I tried to use as little as possible and as you can see from the results, it's a little shaky, but hopefully it gets you on the right track.
EDIT: Oh well, I tried, but the other guy's solution is better =P

Answer 4

Updated to prevent premature collapsing
Tweaking your CSS gave this solution (see fiddle). It requires the padding-top to move from the .listwrapper to the .featuredwrapper to prevent premature collapse from top entry:
Tweaked CSS
.outerbox {
width:20%;
height:100%;
display:inline-block;
background-color:#e8e8e8;
margin-left:-4px;
box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
-webkit-transition: width .3s ease-out;
}
/*prevents premature collapse on right side entry*/
.outerbox:last-of-type:after {
content: '';
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: -2px;
}
.listwrapper:hover .outerbox {
width: 7%;
}
.listwrapper .outerbox:hover {
width:72%;
}