title: Footer Component wrong position in React Router 4 and Layout
body: <p>I am using react router 4.3.1 with React of course, i have created a Layout component, my different content components renders ok whith {this.props.Children} but i cant seem to succed in placing the Footer component at the bottom of all the Layout, even if it is in a new div and "outside" all the logic, my Footer component is the third form top to bottom, at the bottom theres the content. I have been fighting with this for a lot of weeks with no luck, here it my code.</p>
  
  <p>Routes component.-</p>
  
  <pre><code>import React from 'react';
  import { Switch, BrowserRouter, Route } from 'react-router-dom';
  import Layout from './components/Layout';
  import Home from './components/Home';
  import Whoweare from './components/Whoweare';
  import Services from './components/Services';
  import Contact from './components/Contact';
  import Errornotfound from './components/Errornotfound';
  
  export default function Routes() {
  
      return (
          &lt;BrowserRouter&gt;
              &lt;div&gt;
                  &lt;Route component={ Layout }/&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path='/' component={ Home } /&gt;
                      &lt;Route path='/whoweare' component={ Whoweare } /&gt;
                      &lt;Route path='/services' component={ Services } /&gt;
                      &lt;Route path='/contact' component={ Contact } /&gt;
                      &lt;Route component={ Errornotfound } /&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
          &lt;/BrowserRouter&gt;
      );
  }
  </code></pre>
  
  <p>Finally this is my simple Layout component.-</p>
  
  <p>As you can notice Footer is the last component, but even though it is not displayed at the bottom.</p>
  
  <pre><code>import React, { Component } from 'react';
  import Navbars from './Navbars';
  
  import Header from './Header';
  import Banners from './Banners';
  import Footer from './Footer';
  
  export default class Layout extends Component {
      constructor(props) {
          super(props);
          this.state = {};
      }
  
      render() {
          return(
              &lt;div&gt;
                  &lt;col&gt;
                      &lt;Header/&gt;
                      &lt;div&gt;
                          &lt;col&gt;
                              &lt;Navbars/&gt;
                          &lt;/col&gt;
                          &lt;Banners/&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;col&gt;
                              {this.props.Children}
                          &lt;/col&gt;
                      &lt;/div&gt;
                          &lt;Footer/&gt;
                  &lt;/col&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Thank you for everything in advance, somehow i cannot find the solution for this, not even with a new div in the Layout.</p>