Move text footer when you make the screen smaller

Question

I need some help with my footer. I want my text on the right but don't want to push it all in the corner like this. Which happens when you align the text to the right or float the whole div to the right. A margin would be a solution but when i make make my screen smaller the text disappears because the text can't move because of the margin. Thats why I tried to put the text in a div which i set to 25% of the screen. So the text would always take up 25% of the screen. But unfortunately this still doesn't solve my problem because when you make the screen smaller all of the text is now pushed to the bottom.

Does anyone have a working solution for me?

This is how the pages looks right-now (the colors are just there so you can see the divs better)

@charset "UTF-8";

body {
    background-image: url("achtergronden/hout.png");
 width: 100%;
}

html, body{
    margin: 0;
    padding: 0;
}

#Anouk {
 text-align: center;
 margin: 0 auto;
 padding: 0;
}

#Anouk img{
    display: block;
}

#header {
    height: 80px;
    background: #000000;
}

li {
 display: block;
    float: left;
}

li a {
    color: #FFFFFF;
 height: 80px;
}

#contact {
 float: right;
}

#homepagina {
 background-image: url("achtergronden/blauw.png");
 width: 100%;
 height: 473px;
}
 
#updates {
 height:1000px;
}

#laatste {
 color: #FFFFFF;
 font-family: oswald, sans-serif;
 font-size: 30px;
 text-align: center;
 text-decoration: bold 700;
}
 
#footer {
 position: relative;
}


#A {
 height: 80px;
 width: 25%;
 background: yellow;
 float: left;
}

#B {
 background: red;
 width: 25%;
 height: 80px;
 float: left;
}

#C {
 background: blue;
 width: 25%;
 height: 80px;
 float: left;
}

#D {
 background: white;
 width: 25%;
 height: 80px;
 float: left;
}

<div id="Anouk">
  <img src="logo/Hout.png" width="100%" alt="Logo" />
</div>
<div id="header">
  <div id="menu">
    <!--Home-->
    <li id="home">
      <a href="index.html">
        <img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
      </a>
    </li>
    <!--Over Mij-->
    <li id="over">
      <a href="over.html">
        <img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
      </a>
    </li>
    <!--Portfolio-->
    <li id="portfolio">
      <a href="portfolio.html">
        <img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
      </a>
    </li>
    <!--Contact-->
    <li id="contact">
      <a href="contact.html">
        <img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
      </a>
    </li>
  </div>
</div>
<div id="homepagina">
</div>
<div id="updates">
  <p id="laatste">Laatste Updates</p>
</div>
<div id="footer">
  <div id="A"></div>
  <div id="B"></div>
  <div id="C"></div>
  <div id="D">
    <p id="facebook"> F = ..........</p>
    <p id="email"> E = ............</p>
  </div>
</div>

score 0 · Answer 1 · edited May 23 '17 at 11:59

You can simply achieve this by adding padding to the element, but I would wrap the paragraphs in a container element and add padding left and right to it. Now your text won't be pushed inside the corner.

This stackoverflow post can give you some more insight. It explains when to use margin and padding and also explains the difference between them.

html, body {
    height: 100%;;
}

body {
    margin: 0;
}

.content {
    height: 100%;
    margin-top: 15px;
}

.container {
    padding: 0 15px;
}

footer {
    background-color: black;
    color: white;
    padding: 15px 0;
    text-align: right;
}

p {
    margin: 0;
}

<div class="content">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum vero doloremque dolorem eveniet odit dolores inventore neque, praesentium quia quaerat maiores eaque, ex sapiente molestiae assumenda illum quo, aperiam! Pariatur voluptatibus, eum alias corporis commodi amet aut distinctio iure atque, animi nisi rerum quae fuga! Harum ratione corporis, neque explicabo.</p>
    </div>
</div>
<footer>
    <div class="container">
        <p id="facebook"> F = ..........</p>
        <p id="email"> E = ............</p>
    </div>
</footer>

Move text footer when you make the screen smaller

1 Answers1