Need help with css floats and clears

HTML-CSS
1

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;
}
1 Like
2

Just figured it…

For anybody having the same trouble. Put an empty cleared div below your floating elements:

<div style="clear: both;"></div>

if that doesn’t work, check this out. Really helped me…
(sorry they won’t let me use a link.) Try ‘css-tricks, all-about-floats’.

3

You must apply clear on footer :
.footer {clear:both;}

And position:relative; seems to be useless

1 Like