CSS auto expand width for a table

Question

I'm building a website, and I need the layout looks like this:

+---+--------------+
|#  |              |
|n  | #page        |
|a  | table.basic  |
|i  |              |
|g  |              |
|a  |              |
|t  |              |
|i  |              |
|o  +--------------+
|n  | #pagination  |
+---+--------------+

Here is the HTML & CSS:

 #navigation {
   float: left;
   width: 150px; /* Fixed size*/
   min-height: 100%;
   margin: 0;
   padding: 0 2em;
 }
 #page {
   float: left;
   width: auto; /* Auto size. Something need to be changed here.*/
   padding-left: 2em;
   vertical-align: top;
 }
 #pagination {
   font-size: 1.3em;
   position: relative;
   clear: both;
   padding: 0.5em;
   text-align: center;
 }
 table.basic tr th,
 table.basic tr td {
   /* or change something here*/
   border: 2px solid #000000;
   font-weight: bold;
   margin: 1em 0;
   padding: 1em;
 }

<div id="navigation">Show navigation</div>
<div id="page">
  <table class="basic">
    <tr>
      <th>id</th>
      <th>text</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Long long thing</td>
    </tr>
  </table>
  <div id="pagination">Show pagination</div>
</div>

The page content with the table needs to automatically expand, so it doesn't float under the navigation bar. Any idea?

Answer 1

#page doesn't need to float, but it needs to deal with the floatting navigation.

Classic and easy way to do that is to use overflow:hidden;. This change the block formating context.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

div {/*demo purpose*/ border:solid;}
#navigation {
   float: left;
   width: 150px; /* Fixed size*/
   min-height: 100%;
   margin: 0;
   padding: 0 2em;
 }
 #page {
   overflow:hidden;
   padding-left: 2em;
   vertical-align: top;
 }
 #pagination {
   font-size: 1.3em;
   position: relative;
   clear: both;
   padding: 0.5em;
   text-align: center;
 }
 table.basic tr th,
 table.basic tr td {
   /* or change something here*/
   border: 2px solid #000000;
   font-weight: bold;
   margin: 1em 0;
   padding: 1em;
 }

<div id="navigation">Show navigation</div>
<div id="page">
  <table class="basic">
    <tr>
      <th>id</th>
      <th>text</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Long long thing</td>
    </tr>
  </table>
  <div id="pagination">Show pagination</div>
</div>