CSS Tables & min-width container?
- by neezer
<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?
Ex.
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.
