Footer on the bottom

Hi, here is my folder with images and codes (I ll copy and paste the html file since dropbox doesn’t show my code for that file) :slight_smile:

I’m studying CSS and HTML on this web site and now I’m not able to put the footer on the bottom of the page (I already tried all the solutions found on stackoverflow).

Also, I would like to know the width in pixels when somebody zooms a web page and the most common width of the devices in order to make my project responsive.

If you find any stupids codes and you know how to improve them, please feel free to tell me your changes since it is only a week that I know CSS. Thank you in advance.

index.html:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../resources/css/index.css">

<title>Colmar Academy</title>
<header class="first_container">

    <div class="second_container computer">

        <figure>

            <img class="logo" src="../resources/images/ic-logo.svg" alt=""/>

        </figure>

        <h1><strong>COLMAR</strong>ACADEMY</h1>

    </div>

    <nav class="computer">

        <ul>

            <li><a href="#">On Campus</a></li>
            <li><a href="#">Online</a></li>
            <li><a href="#">Companies</a></li>
            <li><a href="#">Sign in</a></li>

        </ul>

    </nav>

    <nav class="mobile">

        <a href="#"><img src="../resources/images/ic-logo.svg" alt="logo"/></a>

        <a href="#"><img src="../resources/images/ic-on-campus.svg" alt="campus"/></a>

        <a href="#"><img src="../resources/images/ic-online.svg" alt="online"/></a>

        <a href="#"><img src="../resources/images/ic-login.svg" alt="log in"/></a>

    </nav>

</header>

<!-- 3rd container (banner) with "learn something new everyday" -->

<main>

    <div class="third_container">

        <figure>

            <img src="../resources/images/banner.jpg" alt=""/>

        </figure>

        <div class="learn">

            <h1 class="learn">Learn something<br>new everyday</h1>

            <h3 class="learn">Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</h3>

            <h3 class="start"><a href="#">Start here</a></h3>

        </div>

    </div>

    <!-- middle of the page (orientation date, campus) -->

    <!-- left side -->

    <div class="fourth_container">

        <figure>

            <img src="../resources/images/information-main.jpg" alt=""/>

        </figure>

        <div>

            <h3 class="practicing">It doesn't hurt to keep practicing</h3>

            <p>

                "Curabitur vitae libero in ipsum porttitor consequat. Aliquam et commodo lectus,<br>nec consequat neque. Sed non accumsan urna. 
                Phasellus sed consequat ex. Etiam<br>eget magna laoreet, efficitur dolor consequat, tristique ligula."

            </p>

            <br><br>

            <aside>Emanuel, Sr Strategist at Hiring.com</aside>

        </div>

    </div>

    <!-- end of left side -->

    <!-- right side -->
    
    <div class="side">

        <figure>

            <img src="../resources/images/information-orientation.jpg" alt=""/>
        
        </figure>

        <figure>

            <img src="../resources/images/information-campus.jpg" alt=""/>

        </figure>

        <figure>

            <img src="../resources/images/information-guest-lecture.jpg" alt=""/>
        
        </figure>

    </div>
    
    <div class="side_two">

        <h3>Orientation Date</h3>

        <h4>Tue 10/11 & Wed 10/12: 8am-3pm</h4>

        <a class="read_more" href="#">Read more</a>

        <h3 class="side_three">Our Campus</h3>
        
        <h4>Find which campus is close by you</h4>

        <a class="read_more" href="#">Read more</a>

        <h3 class="side_three">Our guest lecture</h3>

        <h4>Join a keynote with Oliver Sack<br>about music in medical treatment</h4>
        
        <a class="read_more" href="#">Read more</a>

    </div>

    <!-- end of right side -->

    <!-- setting up 6 containers inside another one (Start Learning) -->
    
    <div class="fifth_container">

        <h1 class="learning">Start learning</h1>

        <div class="inside_container1" id="more_margin">
            
            <figure>

                <a href="#"><img src="../resources/images/course-software.jpg" alt=""/></a>
                    
            </figure>

            <h3>Software engineering</h3>

            <h4>COURSES</h4>
            
            <h4>Web Development, Mobile<br>Development, iOT, APIs</h4>

        </div>

        <div class="inside_container" id="more_margin">

            <figure>

                <a href="#"><img src="../resources/images/course-computer-art.jpg" alt=""/></a>
            
            </figure>

            <h3>Computer art</h3>

            <h4>COURSES</h4>

            <h4>Imaging & Design, Web Design,<br>Motion Graphics & Visual Effects,<br>Computer Animation</h4>

        </div>
        
        <div class="inside_container2" id="more_margin">

            <figure>

                <a href="#"><img src="../resources/images/course-design.jpg" alt=""/></a>

            </figure>

            <h3>Design</h3>

            <h4>COURSES</h4>
            
            <h4>User Experience Design, User<br>Research, Visual Design</h4>
                
        </div>

        <div class="inside_container1" id="more_margin_bottom">

            <figure>

                <a href="#"><img src="../resources/images/course-data.jpg" alt=""/></a>
            
            </figure>

            <h3>Data</h3>

            <h4>COURSES</h4>

            <h4>Data Science, Big Data, SQL, Data<br>Visualization</h4>
                
        </div>

        <div class="inside_container" id="more_margin_bottom">

            <figure>

                <a href="#"><img src="../resources/images/course-business.jpg" alt=""/></a>

            </figure>

            <h3>Business</h3>

            <h4>COURSES</h4>

            <h4>Product Development, Business<br>Development, Startup</h4>
                
        </div>

        <div class="inside_container2" id="more_margin_bottom">

            <figure>

                <a href="#"><img src="../resources/images/course-marketing.jpg" alt=""/></a>

            </figure>

            <h3>Marketing</h3>

            <h4>COURSES</h4>

            <h4>Analytics, Content Marketing,<br>Mobile Marketing</h4>
                
        </div>

    </div>

    <!-- Thesis exhibit (left side) -->

    <h1 class="thesis">Thesis exhibit</h1>
        
    <div class="left_side">

        <video src="../resources/videos/thesis.mp4" controls>Video not supported</video>

        <div class="last_container">
        
            <h3>Reimagine urban</h3>

            <p>

                "Curabitur vitae libero in ipsum porttitor consequat. Aliquam et commodo lectus, 
                nec<br>consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget<br>magna laoreet, 
                efficitur dolor consequat, tristique ligula."

            </p>

        </div>

    </div>

    <!-- Thesis exhibit (right side) -->

    <div class="right_side">

        <figure>

            <a href="#"><img src="../resources/images/thesis-fisma.jpg" alt=""/></a>

        </figure>

        <figure>

            <a href="#"><img src="../resources/images/thesis-now-and-then.jpg" alt=""/></a>

        </figure>
        
    </div>
    
    <div class="right_side2">

        <h3>Fisma: Design and<br>Prototype</h3>

        <h4>Designer showcase of new<br>prototype product</h4>

        <h3 id="now">Now and then</h3>

        <h4>Research study about New York</h4>

    </div>

    <!-- end of thesis -->

</main>

<footer class="css-footer">

    <h4>Colmar Academy. All right reserved</h4>

    <a href="#">Terms</a>

    <a href="#">Privacy</a>

</footer>

Try this for the footer: https://www.youtube.com/watch?v=yc2olxLgKLk

I was able to do it by making 2 containers

<footer class="footer_container">

    <h4>Colmar Academy. All rights reserved</h4>

    <div class="footer_2_container">

        <a href="#">Terms</a>

        <a href="#">Privacy</a>

    </div>

</footer>

and then I added this to the css

.footer_2_container, .footer_2_container a {

color: darkslategray;
text-decoration: none;
margin-right: 10px;

}

.footer_container {

display: inline-flex;
width: 100%;
justify-content: space-between;   
margin-top: 150px;
margin-bottom: 10px;

}

.footer_container h4 {

font-weight: normal;
margin-left: 20px;

}

thank you!

I have a question, everywhere it says that this should happen when there is not much content so why it happened to me? There is a lot of content in this project and in another projects that I have done with less content everything worked just fine!

Yea the multiple containers would work just like a navbar (one for the bar, the other for the buttons).

I have a question, everywhere it says that this should happen when there is not much content so why it happened to me? There is a lot of content in this project and in another projects that I have done with less content everything worked just fine!

I think what is meant by that is that you want to make sure to get your base layout set before completing all the middle content? I’m not sure by what you mean of everywhere, if you can find a link I can give you my opinion.

Glad you got it!

by everywhere I meant ALL the pages of stackoverflow where programmers say that sometimes, when the web page doesn’t have much content, the footer is at the middle of the page instead of the bottom.

This problem it happened to me as well but the thing is that there was already a lot of content and on other 2 projects that I have done (with like half of the half of the content compared to this new project) it didn’t happen.

So my question is why the footer wasn’t at the bottom of the page even though there was a lot of content?

Sorry if I didn’t make myself clear or if you find some mistakes in my writing, english is my 2nd language so I know that is not perfect ahah :slight_smile:

Here’s a clever solution with flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

So my question is why the footer wasn’t at the bottom of the page even though there was a lot of content?

Did you look at it with with an ‘inspect element’ in chrome or firefox? It’ll show you how your css is being interpreted. So if you go back to your code, and try to draw it from its directions, you’ll see why the browser chose to interpret it like that. I prefer Firefox’s inspector, once you right-click and go to inspect element, this handy button lets you hover over all your elements and see outlines/info.
Screen Shot 2020-06-29 at 10.24.12 AM

Thank you so much, that will help! <3

1 Like