Question

<div id="wrapper">
  <div id="header">...</div>
  <div id="main">
    <div id="content">...</div>
    <div id="sidebar">...</div>
  </div>
</div>

#wrapper { min-width: 900px; }
#main { display: table-row; }
#content { display: table-cell; }
#sidebar { display: table-cell; width: 250px; }

The problem is that the sidebar isn’t always at the right-most part of the page (depending on the width of #content). As #content‘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?

---

Example:

Here’s what I have now:

<---  variable window width   ---->
 ---------------------------------
| (header)                        |
 ---------------------------------
 [content]  | [sidebar] |
            |           |
            |           |
            |           |
            |           |
            |           |
            |           |

And here’s what I want:

<---  variable window width   ---->
 ---------------------------------
| (header)                        |
 ---------------------------------
 [content]           | [sidebar] |
                     |           |
                     |           |
                     |           |
                     |           |
                     |           |
                     |           |

---

Please let me know if you need anymore information to help me with this issue. Thanks!

PS – I know I can accomplish this easily with floats. I’m looking for a solution that uses CSS tables.

---

SOLUTION:

#wrapper { min-width: 900px; }
#main { display: table; table-layout: fixed; }
#content { display: table-cell; }
#sidebar { display: table-cell; width: 250px; }

No need to declare a table-row element, thanks to anonymous table elements.

Answer 1

You would need to set the style display: table (or inline-table) on a wrapper div around #main in order for the other table display types to make sense; it’s undefined what happens if you put rows inside something that’s not a table.

Then on that wrapper you’d have to also set table-layout: fixed; to make the browser actually respect the widths you specify (in the first table-row, if you don’t have explicit columns). Otherwise you get the auto table layout algorithm second-guessing you. Finally add width: 100%; to avoid shrink-to-fit.

I’m looking for a solution that uses CSS tables.

Any reason for that, or is this just an exercise? CSS tables aren’t a good choice today due to poor browser support and in the end they don’t really get you anything over just using a table. CSS positioning would seem to be the better way to go for simple layouts like this.