Hey, I wanted to exercise creating simple layouts. I’ve used floats for this one, but can’t get my footer to the bottom. I think I’m using the clear wrongly, but can’t figure it out… Help highly appreciated! Also any comments on my code (better ways of doing it) is very welcome, Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout 1</title>
<link rel="stylesheet" href="layout1.css">
<meta name="description" content="layout">
<!--not necessary-->
<!--CHANGE keywords for search engines -->
<meta name="keywords" content="keywords for search engines">
<meta name="author" content="freya morgen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--not necessary-->
<!--CHANGE The <base> element specifies the base URL and base target for all relative URLs in a page -->
<base href="https://www.w3schools.com/images/" target="_blank">
</head>
<body>
<header>
<div class="top">
<h1>My Website</h1>
<h4>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, veritatis.</h2>
</div>
<nav class="nav-bar">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#" style="float: right;">Link</a>
</nav>
</header>
<main>
<div class="main"></div>
<section class="column-left">
<div class="box">
<h2 class="title">Title heading</h2>
<h4 class="description">title description, Dec 7, 2017</h4>
<div class="img">Image</div>
<p class="text">Some text...<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus commodi dolores
accusamus dignissimos odit. Ratione provident saepe inventore natus reiciendis. Asperiores sint suscipit commodi
ullam doloremque nostrum, aliquid ipsum distinctio ad? Dolorum reiciendis omnis non vel amet iusto velit
expedita. Molestias saepe, iste esse doloremque ad ea cum sequi earum?</p>
</div>
<div class="box">
<h2 class="title">Title heading</h2>
<h4 class="description">title description, Dec 7, 2017</h4>
<div class="img">Image</div>
<p class="text">Some text...<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus commodi dolores
accusamus dignissimos odit. Ratione provident saepe inventore natus reiciendis. Asperiores sint suscipit commodi
ullam doloremque nostrum, aliquid ipsum distinctio ad? Dolorum reiciendis omnis non vel amet iusto velit
expedita. Molestias saepe, iste esse doloremque ad ea cum sequi earum?</p>
</div>
</section>
<section class="column-right">
<div class="box">
<h2 class="title">Title heading</h2>
<h4 class="description">title description, Dec 7, 2017</h4>
<div class="img2">Image</div>
<p class="text">Some text...</p>
</div>
<div class="box">
<h2 class="title">Title heading</h2>
<h4 class="description">title description, Dec 7, 2017</h4>
<div class="img2">Image</div>
<p class="text">Some text...</p>
</div>
<div class="box">
<h2 class="title">Title heading</h2>
<h4 class="description">title description, Dec 7, 2017</h4>
<div class="img2">Image</div>
<p class="text">Some text...</p>
</div>
</section>
</div>
</main>
<footer>
<div class="footer">
<h1>footer</h1>
</div>
</footer>
</body>
</html>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*----- header -----*/
.top {
background-color: cadetblue;
text-align: center;
padding: 4em 02em;
border: none;
}
.nav-bar {
background-color: darkslategrey;
overflow: hidden;
}
.nav-link {
display: block;
position: relative;
background-color: darkslategrey;
color: white;
font-size: 1em;
float: left;
padding: 1em;
text-decoration: none;
}
.nav-link:hover, .nav-link:active {
background-color: cadetblue;
color: darkslategrey;
}
/*----- main -----*/
/*----- left column -----*/
.column-left {
position: relative;
float: left;
width: 70%;
}
.box {
margin: 1em;
padding: 2em 1em;
box-shadow: .3em .3em .5em #525252;
}
.img {
background-color: lightgray;
height: 15em;
padding: 1em;
}
/*----- left column -----*/
.column-right {
position: relative;
float: left;
width: 30%;
}
.img2 {
background-color: lightgray;
height: 5em;
padding: 1em;
}
.main:after {
content: "";
display: table;
clear: both;
}
/*----- footer -----*/
.footer {
display: block;
position: absolute;
background-color: cadetblue;
text-align: center;
padding-top: 4em;
width: 100%;
height: 10em;
}