How can I make a "News section" and stop its bottom text hide under the footer?

[hariskar]

In my site www.mikroviologos.gr I would like to make a news section at the bottom of the content like this example.

I tried different ways:

1. Inside <div id="content" class="col-9"> after the last <p> I created a <div class="col-4"> to divide the content into 3 columns.

2. I made .floating-box following this tutorial inside <div id="content" class="col-9"> after the last <p>

 

but the result was always the same: part of bottom text goes under footer. Why does this happen? Since I put news section inside <div id="content" class="col-9"> shouldn't it have the behavior of content (push the footer down)?

 

So, I would like to ask, which is the best way to create a News section and how can I make it not hide under the footer, but push the footer down like now content does?

 

 

Here is my .css:

* {box-sizing: border-box;}
html{overflow-y:scroll;position:relative;height:100%}
header{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2;}
header > .container {overflow: visible;white-space:nowrap;}
#nav a{color:#d2dce6;font-size:15px;display:block;padding:3px 4px;font-weight:bold;}
#nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left}
#nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4;}
#l1 {color:#f2f2f2;font-size:19px}
#l2 {color:#d2dce6;font-size:14px}
#logoArea {display:inline-block;float:none;height:auto;padding-bottom:0;vertical-align:top;font-weight:bold;font-family:Arial} 
#logoArea > a {white-space:normal;}
#logoArea > a div {margin-left:12px;}
#nav {list-style:outside none none;overflow:hidden;}
#logoArea,#nav {margin:0;}
#navArea {display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap;}
ul#nav {padding:0;}
.container {width: 81%; margin:0 auto;max-width:1000px}
aside{height:100%;margin:12px 0 15px 0}
h1{color:#4A6B98;font-size:21px;}
h2{font-size:19px}
h3{font-size:16px}
#block1{height:auto;margin-top:14px;}
#block1 ul{height:auto;padding:0;margin:0;}
#block1 ul li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9;}
#block1 ul li a{color:#4a6b98;text-decoration:none;font-size:15px;padding:0;display:block;font-weight:bold;}
#block1 ul li a:hover, #block1 li a.selected{color:#262626;}
#block1 li:first-child{border-top:1px solid #d9d9d9;}
#block2, #block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px;line-height:1.5}
#block2 h2, #block3 h2{margin:0;font-size:18px}
#block2 h3, #block3 h3{margin-top:0;}
#block2 p, #block3 p, #block2 form{font-size:13px;}
p{font-size:15px;}
body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:14px;line-height:1.43;color:#4d4d4d;}
body a{text-decoration:none;color:#4a6b98;}
#content{font-size:15px;margin:26px 0 15px;line-height:1.5}
footer{width:100%;text-align:center;background-color:#dae4f1;margin-left:auto;margin-right:auto;border-top:#6e98c2 2px solid}
footer p{font-size:12px;text-align:left;margin:0;line-height:1.43}
#iso {width:41px;height:40.5px;float:left;margin-right:5px}
#p1 {color:#1a3365}
#p2 {color:#dae4f1}
#c {color:#1a3365}
ul.topnav li.icon {display:none;}
.row::after {content: "";clear:both;display:block;}
[class*="col-"] {float:left;padding:15px;}
.col-1 {width:8.33333%;}
.col-2 {width:16.6667%;}
.col-3 {width:25%;}
.col-4 {width:33.3333%;}
.col-5 {width:41.6667%;}
.col-6 {width:50%;}
.col-7 {width:58.3333%;}
.col-8 {width:66.6667%;}
.col-9 {width:75%;}
.col-10 {width:83.3333%;}
.col-11 {width:91.6667%;}
.col-12 {width:100%;}
#wrapper {min-height:100%;}
footer.col-12 {position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;}
aside:after, #content:after {content:"";display:block;padding-bottom:100px;}
footer.col-12 {margin-top:-100px;}
@media screen and (max-width:1020px) {
aside:after {padding-bottom:15px;}
#content img:first-child, #content h1:first-child + img {margin:0 auto;display:block;}
ul.topnav li:not(:first-child) {display:none;}
ul.topnav li.icon {float:right;display:inline-block;}
#logoArea {display:block;text-align:center;}
header {height:auto;}
#navArea {display:block;height:30px;margin:1em 15px;}
[class*="col-"] {width:100%;}
#nav li {float:none;margin:0;background-color:#1a3365;}
#nav {position:absolute;left:0;right:0;}
ul.topnav li.icon {display:inline-block;position:absolute;right:0;top:0;}
#navArea  #nav a {font-size:16px;}
#content {margin-top:0px;}
aside {margin-bottom:0;}
.container{width:auto;}
ul.topnav.responsive {position:relative;}
ul.topnav.responsive li.icon {position:absolute;right:0;top:0;}
ul.topnav.responsive li {float:none;display:block;margin: 0;}
ul.topnav.responsive li a {display:block;text-align:left;}
#nav.topnav.responsive > li:not(:first-child):not(:last-child) {margin-top:-1px;}
}
@media screen and (max-width:1090px) {#nav a {font-size:14px;}}

and here is my .html

<!DOCTYPE html>
<html lang="el">
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>Αρχική σελίδα | Μικροβιολογικό Εργαστήριο στην Καβάλα</title>
<meta name="description" content="Ο Χάρης Καραχριστιανίδης είναι Mικροβιολόγος στην Καβάλα. Το Μικροβιολογικό Εργαστήριό του λειτουργεί από το 2005 στην οδό Φιλικής Εταιρείας 5">
<style>
h1 {margin-top:0;font-weight:bold;font-family:Arial;margin-left:12px}
#mc {max-width:100%;height:auto}
#l1, #l2 {display:block}
</style>
</head>
<body><div id="wrapper">
<header>
<div class="container">
<div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><span id="l1">mikroviologos.gr</span><span id="l2">Εργαστήριο Μικροβιολογίας</span></a></h1></div>
<div id="navArea">
<ul id="nav" class="topnav">
<li><a href="/">Αρχική σελίδα</a></li>
<li><a href="biografiko">Βιογραφικό</a></li>
<li><a href="syxnes-erotiseis">Συχνές ερωτήσεις</a></li>
<li><a href="arthra/">Άρθρα</a></li>
<li><a href="apotelesmata">Αποτελέσματα</a></li>
<li><a href="epikoinonia">Επικοινωνία</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
</div><!--End of navArea-->
<script>
function myFunction() {
var x = document.getElementById("nav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}}
</script>
</div>
</header>
<div class="row">
<div class="container">
<aside class="col-3">
<div id="block1">
<ul>
<li><a href="organosi-ergastiriou">Οργάνωση εργαστηρίου</a></li>
<li><a href="exoplismos">Εξοπλισμός</a></li>
<li><a href="fotografies">Φωτογραφίες</a></li>
<li><a href="tmimata-exetaseis">Τμήματα - εξετάσεις</a></li>
<li><a href="proliptikes-exetaseis">Προληπτικές εξετάσεις</a></li>
<li><a href="politiki-poiotitas">Πολιτική ποιότητας</a></li>
<li><a href="asfalistika-tameia">Ασφαλιστικά ταμεία</a></li>
</ul>
</div><!--End of block1-->
<div id="block2"><h2>Εξετάσεις αλλεργίας</h2><hr><p>Το εργαστήριό μας πρόσφατα απέκτησε τον αναλυτή της Phadia UniCAP 100 που προσδιορίζει με μεγάλη ακρίβεια με τη μέθοδο αναφοράς ImmunoCAP τις ειδικές IgE και την τρυπτάση</p></div>
<div id="block3"><h2>Αποτελέσματα online</h2><hr><p>Αν θέλετε να μπορείτε να βλέπετε τα αποτελέσματά σας online και να τα κατεβάζετε σε μορφή pdf παρακαλώ ενημερώστε μας και <a href="/user/register">εγγραφείτε στην ιστοσελίδα μας</a></p></div>
</aside>
<div id="content" class="col-9">
<img id="mc" src="http://s.mikroviologos.gr/image/microscope.jpg" alt="Μικροβιολογικό Εργαστήριο του Χάρη Καραχριστιανίδη στην Καβάλα"><p>Το μικροβιολογικό εργαστήριο του Χάρη Καραχριστιανίδη, Iατρού Bιοπαθολόγου (Mικροβιολόγου), λειτουργεί από τις αρχές του 2005 στο κέντρο της πόλης της Καβάλας. Σε καίριο σημείο, με εύκολη πρόσβαση από τα χωριά του νομού μας καθώς και από άλλους νομούς, προσφέρουμε υπηρεσίες ιατρικής με εγκυρότητα και υπευθυνότητα.</p>
<p>Ο άρτια εξοπλισμένος χώρος μας με αναλυτές τελευταίας τεχνολογίας, σε συνδυασμό με το εξειδικευμένο και ειδικά καταρτισμένο προσωπικό, σας εγγυώνται αξιοπιστία και ασφάλεια.</p>
<p>Η συνέπεια, η στήριξη, ο επαγγελματισμός και το ανθρώπινο πρόσωπο είναι τα βασικά στοιχεία της παροχής υπηρεσιών υγείας του εργαστηρίου μας, για την κάλυψη των δικών σας αναγκών, κάθε στιγμή που αυτό είναι απαραίτητο.</p>
</div><!--End of content-->
</div><!--End of container-->
</div><!--End of row-->
</div><!--End of wrapper-->
<footer class="col-12"><div class="container"><p class="col-3"><u>Πιστοποίηση ποιότητας</u><br><img id="iso" src=http://s.mikroviologos.gr/image/iso_logoss.png alt="Πιστοποιημένο με ISO 9001:2008 Μικροβιολογικό Εργαστήριο στην Καβάλα">Εργαστήριο πιστοποιημένο<br>με <a href="http://s.mikroviologos.gr/files/iso90012008.pdf" target="_blank">ISO 9001:2008</a> από την<br>TUV Hellas</p><p class="col-2"><u>Διεύθυνση</u><br>Φιλικής Εταιρείας 5<br>(έναντι ΙΚΑ και ΚΤΕΛ),<br>Καβάλα</p><p class="col-3"><u>Επικοινωνία</u><br><span id="p1">☏</span> 2510-620630,<br><span id="p2">☏</span> 6974-900493<br><span id="c">✉</span> <a href="http://www.mikroviologos.gr/forma-epikoinonias">Φόρμα επικοινωνίας</a></p><p class="col-4"><br>Σχεδιασμός: <a href="/">Χάρης Ν. Καραχριστιανίδης</a><br>Copyright © 2005-2016</p></div></footer>
</body>
</html>

Thank you!

Edited October 30, 2016 by hariskar

[dsonesuk]

floating is causing them merge, use clear: both;

aside::after, #content::after {

content: "";

display: block;

padding-bottom: 100px;

clear: both;

}