Min-width and max-width are ignored when displaying an element: table-cell

Question

I am trying to make a simple liquid layout using the CSS table technique , but there is one big drawback that I found in it: min-width and max-width are ignored on elements with display of table cells.

Do you know any workaround that will let me indicate how far the #sidebar element can travel 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

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 place the *-width on them:

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

Answer 2

I am looking for a responsive design for a site that displays left → right down and wants to achieve a minimum width. By doing a bit of research, I think this can answer this question.

https://css-tricks.com/almanac/properties/m/max-width/

Answer 3

If you're just trying to make a sidebar and basic setup, use float: left instead of table-row and table-cell. Then you can put your minimum width on the id.