diff --git a/public/index.css b/public/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..7cc411c301f464740d6a29296c01f2511b96788b
--- /dev/null
+++ b/public/index.css
@@ -0,0 +1,3 @@
+html, body, #root {
+  height: 100%;
+}
diff --git a/public/index.html b/public/index.html
index 05ba77a50cf39bbbd5e96b76bca7d220c3e72f7a..c47259ac382fb7fe391c107cfa03af41f4f58a7d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="index.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/components/App.js b/src/components/App.js
index 40766cef9e4dc5e369cd91108df671be9908dbed..395756a994adaff241bafc91f0e31cda07993a9d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,10 +4,16 @@ import Main from './Main';
 import Footer from './Footer';
 
 const App = () => (
-  <div>
-    <Header />
-    <Main />
-    <Footer />
+  <div style={{ minHeight: '100%', position: 'relative' }}>
+    <header id='header' >
+      <Header />
+    </header>
+    <main id='main'>
+      <Main />
+    </main>
+    <footer id='footer' style={{ position: 'absolute', width: '100%', bottom: '0' }}>
+      <Footer />
+    </footer>
   </div>
 );
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 6438449a1068cd33b00721b4ec453f2f9b7a0335..87210075d1cc789797facfbf9e8b0310a651defb 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 
+
 const Footer = () => (
-  <Segment inverted attached={'bottom'} vertical style={{clear: 'both'}} textAlign='center'>
+  <Segment inverted vertical textAlign='center' >
     <Container>
-      <p textalign='center'>Created by DevTeam &copy; 2017-2018.</p>
+      <p textalign='center' >Created by DevTeam &copy; 2017-2018.</p>
     </Container>
   </Segment>
+
 );
 
 export default Footer;
diff --git a/src/components/pages/News.js b/src/components/pages/News.js
index d1d7bff2d388d7cf4f9791a0fc3076b10bd405fb..acaad62ee38619b4a59fa8383f71b419b262e31b 100644
--- a/src/components/pages/News.js
+++ b/src/components/pages/News.js
@@ -72,7 +72,6 @@ class News extends Component {
   render() {
     return (
       <div>
-
         <Segment style={{ padding: '3em 3em' }} vertical>
           {/*  { this.props.user.is_superuser ? <AddNewsForm /> : ''} */}
           <Container text textAlign='center'>