Min width equal to child width - html

Question

I have a page with a header, content, and footer element. The wrapper arround these elements is 70% of the window width. What I'm looking for is a way to set a minimum width for this wrapper. In my first fiddle it shows how it is right now: http://jsfiddle.net/fwqZX/
HTML:
<div class=outerWrapper>
<nav>
<ul>
<li class='active' id=tab1>Test1</li>
<li id=tab2>Test2</li>
<li id=tab3>Test3</li>
</ul>
</nav>
<section class=content id=content>
<div>
sdflnsdfskdjfisahdfosad
</div>
</section>
<footer>Footer</footer>
</div>
CSS:
html {
overflow-y: scroll;
font-family: Trebuchet MS;
color: rgba(57,58,54, 0.8);
text-shadow: 1px 4px 6px #fff, 0 0 0 #000, 1px 4px 6px #fff;
font-size: 150%;
}
header, nav, footer{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
white-space: nowrap;
cursor: default;
}
body {
margin: 0;
text-align: center;
background: url('dark_wall.png'), #393A36;
}
.content, footer, nav li {
background-color: #fff;
box-shadow: 0 0 10px -1px #000;
}
.outerWrapper {
width: 70%;
display: inline-block;
min-width: 500px;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
}
nav li {
transition: all 0.2s linear;
padding: 0.8em 0.5em;
display: inline-block;
min-width: 120px;
text-align: center;
border-radius: 5px 5px 0 0;
margin-right:10px;
}
nav li:not(.active) {
box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000, inset 1px -10px 10px -11px #444;
background-color:#eee;
cursor: pointer;
}
nav .active {
box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000;
}
.content {
padding: 1em;
text-align:left;
overflow: hidden;
/*transition: height 0.2s ease-in-out;*/
}
.content div {
transition: all 0.2s ease-in-out;
}
.content .hidden {
opacity: 0;
}
footer {
font-size: 0.8em;
padding: 0.8em;
text-align: left;
margin: 20px 0;
}
In this fiddle it shows how I want it to be: http://jsfiddle.net/gkZL4/
The difference between this is only a min-width value on the .outerWrapper class.
The problem with the second fiddle, is that I have a hard coded min-width value. I would like the minimum width of the .outwrapper to adapt to the width of the navigation(the tabs).
I want to prevent using javascript for this. If it is not possible without, I will use a hard coded min-width value.
Any help with this would be greatly appreciated.

Answer 1

You need to give a min-width in stead of a normal width.
Make it like this:
.outerWrapper {
min-width: 70%;
display: inline-block;
}

Answer 2

else, if still want it to be width:70%; or any size that feets content (width:auto;/* wich is equal to not give width at all */) + margin:auto;
Use display:table instead.
Using display:table will allow you not too mind how many tabs or how much content. The CSS is then , reusable within any similar structure and class names.
demo (no width/width or min-width and 3/4 tabs content wider/smaller)
http://jsfiddle.net/gkZL4/2/
.outerWrapper, .nowidth {
display: table;/*or inline-block*/
margin:auto;/* inefficient if inline-block, set text-align:center on parent */
}
.width {
width:70%;
}
.minwidth {
min-width:70%;
}
If you think display:table is inapropriate for old browser, you should first watch for display:inline-block .
IE6 applies width as min-width, IE7 will applie width given or full width. (any display:inline-block rules used on block-level element will need to be adapted for those two IES => haslayout with: display:inline; and zoom:1;
You may add a max-width and overflow-x:auto; to #content to avoid it to become to large on width .