CSS автоматически расширить ширину для таблицы

Question

Я строю сайт, и мне нужно макет выглядит следующим образом:

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

Вот 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>

Содержимое страницы с таблицей должно автоматически расширяться, поэтому оно не плавает под панелью навигации. Есть идеи?

Answer 1

#page не нужно плавать, но ему необходимо иметь дело с плавающей навигацией.

Классический и простой способ сделать это - использовать переполнение: скрыто ;. Это изменит контекст формирования блока.

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>