min-width for wrapper DIV not working - css

Question

I've two floated DIVs (two columns) which are nested in an "clear-float"-DIV, which itself is nested in an centered DIV ("wrapper" DIV).
<div id="content">
<div class="block2">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
The right column has min-width and max-width CSS option set. But the wrapper DIV, which has min-width and max-width also, is always expanded to max width.
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
}
.block {
overflow: hidden;
_overflow: visible;
_overflow-x: hidden;
_height: 0;
}
#slot_left {
width: 200px;
background: #ff0;
float: left;
position: relative;
}
#slot_right {
float: left;
background: #cc0;
min-width: 100px;
max-width: 150px;
position: relative;
}
What's the reason for that? I want the wrapper DIV to has minimum width required but to be centered on screen.
Here is an fiddle.

Answer 1

use display:inline-block
why this is happening?? div is by default block level element, so when you have given max-width, it will always obey it to occupy max area possible....
http://jsfiddle.net/sHB7g/3/
CSS
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
display:inline-block
}
.block {
display:inline-block;
overflow: hidden;
border:1px solid #000;
}

Answer 2

http://jsfiddle.net/sHB7g/1/
#content {
display: inline-block;
}
and then added a content wrapper
#contentwrapper {
text-align: center;
}
the html then is like this
<div id="contentwrapper">
<div id="content">
<div class="block">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>