Here is an example of what I am trying to do(put a table in a div and make it fill the div): [ex1\_jsfiddle](https://jsfiddle.net/ph3ban0v)

```css
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
td,
th {
  border: 1px solid;
  text-align: left;
  padding: 0px 55px 0px 55px;
}
tr:nth-child(even) {
  background-color: lightgreen;
}
tr {
  margin-top: 0;
}
aside {
  background-color: lightblue;
  border: solid 2px;
  position: absolute;
  float: left;
  height: 100%;
  width: 15%;
}
#table_div {
  float: left;
  border: solid 2px;
  margin-left: 25%;
  height: 300px;
  width: 700px;
  border-color: red;
}
```

```html
<aside>sidebar</aside>
<div id="table_div">
  <table>

    <tr>

      <th>Firstname</th>

      <th>Lastname</th>

      <th>Age</th>
      </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>
</div>
```

The problem is that as you see in `ex1` the table is getting out of the parent div. And the most strange thing is that if I indent the elements between `<div_id="table_div>` and `</div>` with 1 tab, it works BUT ONLY in jsfiddle: [ex2\_jsfiddle](https://jsfiddle.net/6d52c67r/)

When I try it in my browser(Chrome) it doesn't work.

So, can someone explain to me what is going on?