title: CSS Tables & min-width container?
body: <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="header"&gt;...&lt;/div&gt;
    &lt;div id="main"&gt;
      &lt;div id="content"&gt;...&lt;/div&gt;
      &lt;div id="sidebar"&gt;...&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  #wrapper { min-width: 900px; }
  #main { display: table-row; }
  #content { display: table-cell; }
  #sidebar { display: table-cell; width: 250px; }
  </code></pre>
  
  <p>The problem is that the sidebar isn't always at the right-most part of the page (depending on the width of <code>#content</code>). As <code>#content</code>'s width is variable (depending on the width of the window), how to I make it so that the sidebar is always at the right-most part of its parent?</p>
  
  <hr>
  
  <p>Example: </p>
  
  <p>Here's what I have now:</p>
  
  <pre><code>&lt;---  variable window width   ----&gt;
   ---------------------------------
  | (header)                        |
   ---------------------------------
   [content]  | [sidebar] |
              |           |
              |           |
              |           |
              |           |
              |           |
              |           |
  </code></pre>
  
  <p>And here's what I want:</p>
  
  <pre><code>&lt;---  variable window width   ----&gt;
   ---------------------------------
  | (header)                        |
   ---------------------------------
   [content]           | [sidebar] |
                       |           |
                       |           |
                       |           |
                       |           |
                       |           |
                       |           |
  </code></pre>
  
  <hr>
  
  <p>Please let me know if you need anymore information to help me with this issue. Thanks!</p>
  
  <p>PS - I know I can accomplish this easily with floats. I'm looking for a solution that uses CSS tables.</p>
  
  <hr>
  
  <p>SOLUTION:</p>
  
  <pre><code>#wrapper { min-width: 900px; }
  #main { display: table; table-layout: fixed; }
  #content { display: table-cell; }
  #sidebar { display: table-cell; width: 250px; }
  </code></pre>
  
  <p>No need to declare a <code>table-row</code> element, thanks to <a href="http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/" rel="nofollow noreferrer">anonymous table elements</a>. </p>