min-width and max-wdith are ignored when element has display:table-cell

Question

I'm trying to do simple fluid layout using CSS tables techniqe, but there is one big flow that I have found in it: min-width and max-width are ignored on elements with table-cell display.

Do you know any workaround that would allow me to specify how far #sidebar element can stretch in the following example?

XHTML:

<div id="wrapper">

  <div id="main">
  </div>

  <div id="sidebar">
  </div>

</div>

CSS:

#wrapper {
display: table-row;
border-collapse: collapse;
}

  #main {
  display: table-cell;
  }

  #sidebar {
  display: table-cell;
  width: 30%;
  min-width: 100px;  /* does not work! */
  max-width: 310px;  /* does not work! */
  }

Answer 1

If you are just trying to do a sidebar and main setup, use float: left instead of table-row and table-cell. Then you can put your min-width on the id.

Answer 2

Add another wrapper inside each div:

<div id="wrapper">

  <div id="main">
    <div class="inner"></div>
  </div>

  <div id="sidebar">
    <div class="inner"></div>
  </div>

</div>

And put the *-width declarations on them:

#sidebar div.inner {
    min-width: 100px;
    max-width: 300px;
}