Footer background color dissappearing and footer text left floating in middle of screen

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

So when in full screen on a desktop you can see that the footer is fine, but when resizing to a narrower screen the blue background for the footer disappears and the text for the footer stays in the middle of the screen.

We are creating this webpage for the biochemistry department at my school and reviving credit for it.

The html page is studentawards and the css is main and awards. The content is here in this repository.

Edit
jsfiddle.

Edit 2 This seems to work just fine in jsfiddle, but it isn't on windows 10 Chrome, or firefox.

  <!DOCTYPE html>

 <html lang="en">

<head>

    <link href="main.css" rel="stylesheet">

    <link href="awards.css" rel="stylesheet">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>

    <header>

    </header>

    <div id="seperator"></div>

    <div id="content">

        <nav>

            <ul>

               <li><a href="index.html">Home</a></li>

                <li><a href="teaching.html">Teaching</a></li>

                <li><a href="research.html">Research</a></li>

                          <li><a href="publications.html">Publication</a></li>

                <li><a href="studentawards.html">Student Awards</a></li>

                <li><a href="gallery.html">Gallery</a></li>

                <li><a href="contact.html">Contact</a></li>

            </ul>

            <div id="sponsorLogo">

                <img id ="logo" src="resources/Acs.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/nationalInstitudeofHealth.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/Nsf.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/Kbrin.png" alt="Kbrin" height="40%" width="40%"><br><br>

                <img id ="logo" src="resources/Cinsam.png" alt="ACS" height="80%" width="80%"><br><br>

                </div>

        </nav>

        <main>

            <!--THIS IS WHAT GETS CHANGED ON THE DIFFERENT PAGES-->

                <div class="awards">

                    <ul class="awardsItem">

                        <h3>KAS Undergraduate <br> Oral Presentation Competition</h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>1st. Place Ayanav Roy</li>

                        <li>2nd. Place Quynh Nguyen</li>

                        <strong>2016: </strong><li>1st. Place Quynh Nguyen</li>

                        <strong>2015: </strong><li>1st. Place Alma Onate</li>

                        <strong>2014: </strong><li>3rd. Place Thuy Donna Do</li>

                        <strong>2013: </strong><li>1st. Place Thuy Donna Do</li>

                        <strong>2011: </strong><li>2nd. Place Adam McCallum</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>UR-STEM Summer Research Award</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Elizabeth Osifalujo</li>

                        <li>Kayla Laverne   </li>

                        <strong>2016: </strong><li>Andrew Quillen</li>

                        <li>Quynh Nguyen    </li>

                        <strong>2013: </strong><li>Emily Hogle</li>

                        <li>Janelle Tucker</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Dorothy Westerman Hermann <br> Undergraduate Research Award </h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Alex Rosen</li>

                        <strong>2017: </strong><li>Andrew Quillen</li>

                        <strong>2015: </strong><li>Alma Onate</li>

                        <strong>2014: </strong><li>Thuy Donna Do</li>

                        <strong>2013: </strong><li>Rebecca Kidney</li>

                        <strong>2012: </strong><li>Quintin Hauser</li>

                        <strong>2011: </strong><li>Eric Amato</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>ACS Undergraduate Award in <br> Organic Chemistry</h3>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                        <strong>2015: </strong><li>Thuy Donna Do</li>

                        <strong>2014: </strong><li>Timothy Dunn</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>Student Undergraduate <br> Research & Creative Awards (SURCA)</h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Quynh Nguyen</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Regents Award</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Greaves <br> Undergraduate Summer Research Award </h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Andrew Quillen</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>Cooper Research Excellence Scholarship</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Quynh Nguyen</li>

                        <strong>2015: </strong><li>Alma Onate</li>

                        <strong>2014: </strong><li>Thuy Donna Do</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Chemistry Department <br> Outstanding Senior Graduate</h3>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                        <strong>2015: </strong><li>Thuy Donna Do</li>

                        <strong>2014: </strong><li>Timothy Dunn</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>ACS Travel Award</h3>

                        <hr class="horizontalRule">

                        <strong>2011: </strong><li>Kevin Bonfield</li>

                    </ul>



                </div>

            <!--END OF WHAT CHANGES ON THE DIFFERENT PAGES-->

        </main>

        <div id="news">

            <a class="twitter-timeline" date-width="600" data-height="100%" data-theme="light" href="https://twitter.com/SatisfactoryAF?ref_src=twsrc%5Etfw">Tweets by SatisfactoryAF</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

        </div>

    </div>

    <div id="footer">

        <footer class="footer">

            &nbsp;&nbsp;&nbsp;&nbsp;Copyright &copy; Lili Ma, Ph.D.<br>

            &nbsp;&nbsp;&nbsp;&nbsp;Department of Chemistry & Biochemistry, Office SC 448<br>

            &nbsp;&nbsp;&nbsp;&nbsp;Northern Kentucky University at Highland Heights, KY 41099<br>

        </footer>

    </div>

</body>

any and all help would be appreciated, I am nearly positive it has to do with flex-box, but since my instructor seems to not know much about I am kind of shooting in the dark here.

any and all help would be appriciated.

Resources I have accessed:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

https://stackoverflow.com/questions/50429737/sticky-footer-with-flexbox

https://stackoverflow.com/questions/30202294/flexbox-wraps-outside-of-container

https://codepen.io/noahblon/post/practical-guide-to-flexbox-dont-forget-about-flex-shrink

none of the above seemed to hold what I needed

edited Nov 22 '18 at 3:08

asked Nov 22 '18 at 2:52

Adam Schneider

8311

1

Can you post up a minimal and verifiable example in codesandbox, jsfiddle, anything?

– CHBresser
Nov 22 '18 at 2:56

There I just posted it

– Adam Schneider
Nov 22 '18 at 3:09

add a comment |

We are creating this webpage for the biochemistry department at my school and reviving credit for it.

The html page is studentawards and the css is main and awards. The content is here in this repository.

Edit
jsfiddle.

Edit 2 This seems to work just fine in jsfiddle, but it isn't on windows 10 Chrome, or firefox.

  <!DOCTYPE html>

 <html lang="en">

<head>

    <link href="main.css" rel="stylesheet">

    <link href="awards.css" rel="stylesheet">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>

    <header>

    </header>

    <div id="seperator"></div>

    <div id="content">

        <nav>

            <ul>

               <li><a href="index.html">Home</a></li>

                <li><a href="teaching.html">Teaching</a></li>

                <li><a href="research.html">Research</a></li>

                          <li><a href="publications.html">Publication</a></li>

                <li><a href="studentawards.html">Student Awards</a></li>

                <li><a href="gallery.html">Gallery</a></li>

                <li><a href="contact.html">Contact</a></li>

            </ul>

            <div id="sponsorLogo">

                <img id ="logo" src="resources/Acs.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/nationalInstitudeofHealth.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/Nsf.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/Kbrin.png" alt="Kbrin" height="40%" width="40%"><br><br>

                <img id ="logo" src="resources/Cinsam.png" alt="ACS" height="80%" width="80%"><br><br>

                </div>

        </nav>

        <main>

            <!--THIS IS WHAT GETS CHANGED ON THE DIFFERENT PAGES-->

                <div class="awards">

                    <ul class="awardsItem">

                        <h3>KAS Undergraduate <br> Oral Presentation Competition</h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>1st. Place Ayanav Roy</li>

                        <li>2nd. Place Quynh Nguyen</li>

                        <strong>2016: </strong><li>1st. Place Quynh Nguyen</li>

                        <strong>2015: </strong><li>1st. Place Alma Onate</li>

                        <strong>2014: </strong><li>3rd. Place Thuy Donna Do</li>

                        <strong>2013: </strong><li>1st. Place Thuy Donna Do</li>

                        <strong>2011: </strong><li>2nd. Place Adam McCallum</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>UR-STEM Summer Research Award</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Elizabeth Osifalujo</li>

                        <li>Kayla Laverne   </li>

                        <strong>2016: </strong><li>Andrew Quillen</li>

                        <li>Quynh Nguyen    </li>

                        <strong>2013: </strong><li>Emily Hogle</li>

                        <li>Janelle Tucker</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Dorothy Westerman Hermann <br> Undergraduate Research Award </h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Alex Rosen</li>

                        <strong>2017: </strong><li>Andrew Quillen</li>

                        <strong>2015: </strong><li>Alma Onate</li>

                        <strong>2014: </strong><li>Thuy Donna Do</li>

                        <strong>2013: </strong><li>Rebecca Kidney</li>

                        <strong>2012: </strong><li>Quintin Hauser</li>

                        <strong>2011: </strong><li>Eric Amato</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>ACS Undergraduate Award in <br> Organic Chemistry</h3>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                        <strong>2015: </strong><li>Thuy Donna Do</li>

                        <strong>2014: </strong><li>Timothy Dunn</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>Student Undergraduate <br> Research & Creative Awards (SURCA)</h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Quynh Nguyen</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Regents Award</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Greaves <br> Undergraduate Summer Research Award </h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Andrew Quillen</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>Cooper Research Excellence Scholarship</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Quynh Nguyen</li>

                        <strong>2015: </strong><li>Alma Onate</li>

                        <strong>2014: </strong><li>Thuy Donna Do</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Chemistry Department <br> Outstanding Senior Graduate</h3>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                        <strong>2015: </strong><li>Thuy Donna Do</li>

                        <strong>2014: </strong><li>Timothy Dunn</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>ACS Travel Award</h3>

                        <hr class="horizontalRule">

                        <strong>2011: </strong><li>Kevin Bonfield</li>

                    </ul>



                </div>

            <!--END OF WHAT CHANGES ON THE DIFFERENT PAGES-->

        </main>

        <div id="news">

            <a class="twitter-timeline" date-width="600" data-height="100%" data-theme="light" href="https://twitter.com/SatisfactoryAF?ref_src=twsrc%5Etfw">Tweets by SatisfactoryAF</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

        </div>

    </div>

    <div id="footer">

        <footer class="footer">

            &nbsp;&nbsp;&nbsp;&nbsp;Copyright &copy; Lili Ma, Ph.D.<br>

            &nbsp;&nbsp;&nbsp;&nbsp;Department of Chemistry & Biochemistry, Office SC 448<br>

            &nbsp;&nbsp;&nbsp;&nbsp;Northern Kentucky University at Highland Heights, KY 41099<br>

        </footer>

    </div>

</body>

any and all help would be appreciated, I am nearly positive it has to do with flex-box, but since my instructor seems to not know much about I am kind of shooting in the dark here.

any and all help would be appriciated.

Resources I have accessed:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

https://stackoverflow.com/questions/50429737/sticky-footer-with-flexbox

https://stackoverflow.com/questions/30202294/flexbox-wraps-outside-of-container

https://codepen.io/noahblon/post/practical-guide-to-flexbox-dont-forget-about-flex-shrink

none of the above seemed to hold what I needed

edited Nov 22 '18 at 3:08

asked Nov 22 '18 at 2:52

Adam Schneider

8311

1

Can you post up a minimal and verifiable example in codesandbox, jsfiddle, anything?

– CHBresser
Nov 22 '18 at 2:56

There I just posted it

– Adam Schneider
Nov 22 '18 at 3:09

add a comment |

We are creating this webpage for the biochemistry department at my school and reviving credit for it.

The html page is studentawards and the css is main and awards. The content is here in this repository.

Edit
jsfiddle.

Edit 2 This seems to work just fine in jsfiddle, but it isn't on windows 10 Chrome, or firefox.

  <!DOCTYPE html>

 <html lang="en">

<head>

    <link href="main.css" rel="stylesheet">

    <link href="awards.css" rel="stylesheet">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>

    <header>

    </header>

    <div id="seperator"></div>

    <div id="content">

        <nav>

            <ul>

               <li><a href="index.html">Home</a></li>

                <li><a href="teaching.html">Teaching</a></li>

                <li><a href="research.html">Research</a></li>

                          <li><a href="publications.html">Publication</a></li>

                <li><a href="studentawards.html">Student Awards</a></li>

                <li><a href="gallery.html">Gallery</a></li>

                <li><a href="contact.html">Contact</a></li>

            </ul>

            <div id="sponsorLogo">

                <img id ="logo" src="resources/Acs.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/nationalInstitudeofHealth.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/Nsf.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/Kbrin.png" alt="Kbrin" height="40%" width="40%"><br><br>

                <img id ="logo" src="resources/Cinsam.png" alt="ACS" height="80%" width="80%"><br><br>

                </div>

        </nav>

        <main>

            <!--THIS IS WHAT GETS CHANGED ON THE DIFFERENT PAGES-->

                <div class="awards">

                    <ul class="awardsItem">

                        <h3>KAS Undergraduate <br> Oral Presentation Competition</h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>1st. Place Ayanav Roy</li>

                        <li>2nd. Place Quynh Nguyen</li>

                        <strong>2016: </strong><li>1st. Place Quynh Nguyen</li>

                        <strong>2015: </strong><li>1st. Place Alma Onate</li>

                        <strong>2014: </strong><li>3rd. Place Thuy Donna Do</li>

                        <strong>2013: </strong><li>1st. Place Thuy Donna Do</li>

                        <strong>2011: </strong><li>2nd. Place Adam McCallum</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>UR-STEM Summer Research Award</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Elizabeth Osifalujo</li>

                        <li>Kayla Laverne   </li>

                        <strong>2016: </strong><li>Andrew Quillen</li>

                        <li>Quynh Nguyen    </li>

                        <strong>2013: </strong><li>Emily Hogle</li>

                        <li>Janelle Tucker</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Dorothy Westerman Hermann <br> Undergraduate Research Award </h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Alex Rosen</li>

                        <strong>2017: </strong><li>Andrew Quillen</li>

                        <strong>2015: </strong><li>Alma Onate</li>

                        <strong>2014: </strong><li>Thuy Donna Do</li>

                        <strong>2013: </strong><li>Rebecca Kidney</li>

                        <strong>2012: </strong><li>Quintin Hauser</li>

                        <strong>2011: </strong><li>Eric Amato</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>ACS Undergraduate Award in <br> Organic Chemistry</h3>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                        <strong>2015: </strong><li>Thuy Donna Do</li>

                        <strong>2014: </strong><li>Timothy Dunn</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>Student Undergraduate <br> Research & Creative Awards (SURCA)</h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Quynh Nguyen</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Regents Award</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Greaves <br> Undergraduate Summer Research Award </h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Andrew Quillen</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>Cooper Research Excellence Scholarship</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Quynh Nguyen</li>

                        <strong>2015: </strong><li>Alma Onate</li>

                        <strong>2014: </strong><li>Thuy Donna Do</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Chemistry Department <br> Outstanding Senior Graduate</h3>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                        <strong>2015: </strong><li>Thuy Donna Do</li>

                        <strong>2014: </strong><li>Timothy Dunn</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>ACS Travel Award</h3>

                        <hr class="horizontalRule">

                        <strong>2011: </strong><li>Kevin Bonfield</li>

                    </ul>



                </div>

            <!--END OF WHAT CHANGES ON THE DIFFERENT PAGES-->

        </main>

        <div id="news">

            <a class="twitter-timeline" date-width="600" data-height="100%" data-theme="light" href="https://twitter.com/SatisfactoryAF?ref_src=twsrc%5Etfw">Tweets by SatisfactoryAF</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

        </div>

    </div>

    <div id="footer">

        <footer class="footer">

            &nbsp;&nbsp;&nbsp;&nbsp;Copyright &copy; Lili Ma, Ph.D.<br>

            &nbsp;&nbsp;&nbsp;&nbsp;Department of Chemistry & Biochemistry, Office SC 448<br>

            &nbsp;&nbsp;&nbsp;&nbsp;Northern Kentucky University at Highland Heights, KY 41099<br>

        </footer>

    </div>

</body>

any and all help would be appreciated, I am nearly positive it has to do with flex-box, but since my instructor seems to not know much about I am kind of shooting in the dark here.

any and all help would be appriciated.

Resources I have accessed:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

https://stackoverflow.com/questions/50429737/sticky-footer-with-flexbox

https://stackoverflow.com/questions/30202294/flexbox-wraps-outside-of-container

https://codepen.io/noahblon/post/practical-guide-to-flexbox-dont-forget-about-flex-shrink

none of the above seemed to hold what I needed

edited Nov 22 '18 at 3:08

asked Nov 22 '18 at 2:52

Adam Schneider

8311

We are creating this webpage for the biochemistry department at my school and reviving credit for it.

The html page is studentawards and the css is main and awards. The content is here in this repository.

Edit
jsfiddle.

Edit 2 This seems to work just fine in jsfiddle, but it isn't on windows 10 Chrome, or firefox.

  <!DOCTYPE html>

 <html lang="en">

<head>

    <link href="main.css" rel="stylesheet">

    <link href="awards.css" rel="stylesheet">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>

    <header>

    </header>

    <div id="seperator"></div>

    <div id="content">

        <nav>

            <ul>

               <li><a href="index.html">Home</a></li>

                <li><a href="teaching.html">Teaching</a></li>

                <li><a href="research.html">Research</a></li>

                          <li><a href="publications.html">Publication</a></li>

                <li><a href="studentawards.html">Student Awards</a></li>

                <li><a href="gallery.html">Gallery</a></li>

                <li><a href="contact.html">Contact</a></li>

            </ul>

            <div id="sponsorLogo">

                <img id ="logo" src="resources/Acs.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/nationalInstitudeofHealth.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/Nsf.png" alt="ACS" height="30%" width="30%"><br><br>

                <img id ="logo" src="resources/Kbrin.png" alt="Kbrin" height="40%" width="40%"><br><br>

                <img id ="logo" src="resources/Cinsam.png" alt="ACS" height="80%" width="80%"><br><br>

                </div>

        </nav>

        <main>

            <!--THIS IS WHAT GETS CHANGED ON THE DIFFERENT PAGES-->

                <div class="awards">

                    <ul class="awardsItem">

                        <h3>KAS Undergraduate <br> Oral Presentation Competition</h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>1st. Place Ayanav Roy</li>

                        <li>2nd. Place Quynh Nguyen</li>

                        <strong>2016: </strong><li>1st. Place Quynh Nguyen</li>

                        <strong>2015: </strong><li>1st. Place Alma Onate</li>

                        <strong>2014: </strong><li>3rd. Place Thuy Donna Do</li>

                        <strong>2013: </strong><li>1st. Place Thuy Donna Do</li>

                        <strong>2011: </strong><li>2nd. Place Adam McCallum</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>UR-STEM Summer Research Award</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Elizabeth Osifalujo</li>

                        <li>Kayla Laverne   </li>

                        <strong>2016: </strong><li>Andrew Quillen</li>

                        <li>Quynh Nguyen    </li>

                        <strong>2013: </strong><li>Emily Hogle</li>

                        <li>Janelle Tucker</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Dorothy Westerman Hermann <br> Undergraduate Research Award </h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Alex Rosen</li>

                        <strong>2017: </strong><li>Andrew Quillen</li>

                        <strong>2015: </strong><li>Alma Onate</li>

                        <strong>2014: </strong><li>Thuy Donna Do</li>

                        <strong>2013: </strong><li>Rebecca Kidney</li>

                        <strong>2012: </strong><li>Quintin Hauser</li>

                        <strong>2011: </strong><li>Eric Amato</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>ACS Undergraduate Award in <br> Organic Chemistry</h3>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                        <strong>2015: </strong><li>Thuy Donna Do</li>

                        <strong>2014: </strong><li>Timothy Dunn</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>Student Undergraduate <br> Research & Creative Awards (SURCA)</h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Quynh Nguyen</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Regents Award</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Greaves <br> Undergraduate Summer Research Award </h3>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Andrew Quillen</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>Cooper Research Excellence Scholarship</h3> <br>

                        <hr class="horizontalRule">

                        <strong>2018: </strong><li>Quynh Nguyen</li>

                        <strong>2015: </strong><li>Alma Onate</li>

                        <strong>2014: </strong><li>Thuy Donna Do</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>NKU Chemistry Department <br> Outstanding Senior Graduate</h3>

                        <hr class="horizontalRule">

                        <strong>2016: </strong><li>Alma Onate</li>

                        <strong>2015: </strong><li>Thuy Donna Do</li>

                        <strong>2014: </strong><li>Timothy Dunn</li>

                    </ul>



                    <ul class="awardsItem">

                        <h3>ACS Travel Award</h3>

                        <hr class="horizontalRule">

                        <strong>2011: </strong><li>Kevin Bonfield</li>

                    </ul>



                </div>

            <!--END OF WHAT CHANGES ON THE DIFFERENT PAGES-->

        </main>

        <div id="news">

            <a class="twitter-timeline" date-width="600" data-height="100%" data-theme="light" href="https://twitter.com/SatisfactoryAF?ref_src=twsrc%5Etfw">Tweets by SatisfactoryAF</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

        </div>

    </div>

    <div id="footer">

        <footer class="footer">

            &nbsp;&nbsp;&nbsp;&nbsp;Copyright &copy; Lili Ma, Ph.D.<br>

            &nbsp;&nbsp;&nbsp;&nbsp;Department of Chemistry & Biochemistry, Office SC 448<br>

            &nbsp;&nbsp;&nbsp;&nbsp;Northern Kentucky University at Highland Heights, KY 41099<br>

        </footer>

    </div>

</body>

any and all help would be appreciated, I am nearly positive it has to do with flex-box, but since my instructor seems to not know much about I am kind of shooting in the dark here.

any and all help would be appriciated.

Resources I have accessed:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

https://stackoverflow.com/questions/50429737/sticky-footer-with-flexbox

https://stackoverflow.com/questions/30202294/flexbox-wraps-outside-of-container

https://codepen.io/noahblon/post/practical-guide-to-flexbox-dont-forget-about-flex-shrink

none of the above seemed to hold what I needed

html css flexbox

edited Nov 22 '18 at 3:08

asked Nov 22 '18 at 2:52

Adam Schneider

8311

edited Nov 22 '18 at 3:08

asked Nov 22 '18 at 2:52

Adam Schneider

8311

edited Nov 22 '18 at 3:08

asked Nov 22 '18 at 2:52

Adam Schneider

8311

asked Nov 22 '18 at 2:52

Adam Schneider

8311

asked Nov 22 '18 at 2:52

Adam Schneider

8311

1

Can you post up a minimal and verifiable example in codesandbox, jsfiddle, anything?

– CHBresser
Nov 22 '18 at 2:56

There I just posted it

– Adam Schneider
Nov 22 '18 at 3:09

add a comment |

1

Can you post up a minimal and verifiable example in codesandbox, jsfiddle, anything?

– CHBresser
Nov 22 '18 at 2:56

There I just posted it

– Adam Schneider
Nov 22 '18 at 3:09

Can you post up a minimal and verifiable example in codesandbox, jsfiddle, anything?

– CHBresser
Nov 22 '18 at 2:56

There I just posted it

– Adam Schneider
Nov 22 '18 at 3:09

add a comment |

1 Answer
1

active

oldest

votes

 <div id="content" style="height: auto;"> replace <div id="content">

in studentawards.html

edited Nov 22 '18 at 3:21

Adam Schneider

8311

answered Nov 22 '18 at 3:07

kaluogh

344

<div id="content" style="height: auto;">

– kaluogh
Nov 22 '18 at 3:07

I'm sorry I don't understand your comment.

– Adam Schneider
Nov 22 '18 at 3:10

1

use <div id="content" style="height: auto;"> replace <div id="content"> in studentawards.html

– kaluogh
Nov 22 '18 at 3:11

Maybe i make a misstic, if so i'm sorry.

– kaluogh
Nov 22 '18 at 3:12

accept my edit and I will give you the answer

– Adam Schneider
Nov 22 '18 at 3:15

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423218%2ffooter-background-color-dissappearing-and-footer-text-left-floating-in-middle-of%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

 <div id="content" style="height: auto;"> replace <div id="content">

in studentawards.html

edited Nov 22 '18 at 3:21

Adam Schneider

8311

answered Nov 22 '18 at 3:07

kaluogh

344

<div id="content" style="height: auto;">

– kaluogh
Nov 22 '18 at 3:07

I'm sorry I don't understand your comment.

– Adam Schneider
Nov 22 '18 at 3:10

1

use <div id="content" style="height: auto;"> replace <div id="content"> in studentawards.html

– kaluogh
Nov 22 '18 at 3:11

Maybe i make a misstic, if so i'm sorry.

– kaluogh
Nov 22 '18 at 3:12

accept my edit and I will give you the answer

– Adam Schneider
Nov 22 '18 at 3:15

add a comment |

 <div id="content" style="height: auto;"> replace <div id="content">

in studentawards.html

edited Nov 22 '18 at 3:21

Adam Schneider

8311

answered Nov 22 '18 at 3:07

kaluogh

344

<div id="content" style="height: auto;">

– kaluogh
Nov 22 '18 at 3:07

I'm sorry I don't understand your comment.

– Adam Schneider
Nov 22 '18 at 3:10

1

use <div id="content" style="height: auto;"> replace <div id="content"> in studentawards.html

– kaluogh
Nov 22 '18 at 3:11

Maybe i make a misstic, if so i'm sorry.

– kaluogh
Nov 22 '18 at 3:12

accept my edit and I will give you the answer

– Adam Schneider
Nov 22 '18 at 3:15

add a comment |

 <div id="content" style="height: auto;"> replace <div id="content">

in studentawards.html

edited Nov 22 '18 at 3:21

Adam Schneider

8311

answered Nov 22 '18 at 3:07

kaluogh

344

 <div id="content" style="height: auto;"> replace <div id="content">

in studentawards.html

edited Nov 22 '18 at 3:21

Adam Schneider

8311

answered Nov 22 '18 at 3:07

kaluogh

344

edited Nov 22 '18 at 3:21

Adam Schneider

8311

edited Nov 22 '18 at 3:21

Adam Schneider

8311

edited Nov 22 '18 at 3:21

Adam Schneider

8311

answered Nov 22 '18 at 3:07

kaluogh

344

answered Nov 22 '18 at 3:07

kaluogh

344

answered Nov 22 '18 at 3:07

kaluogh

344

<div id="content" style="height: auto;">

– kaluogh
Nov 22 '18 at 3:07

I'm sorry I don't understand your comment.

– Adam Schneider
Nov 22 '18 at 3:10

1

use <div id="content" style="height: auto;"> replace <div id="content"> in studentawards.html

– kaluogh
Nov 22 '18 at 3:11

Maybe i make a misstic, if so i'm sorry.

– kaluogh
Nov 22 '18 at 3:12

accept my edit and I will give you the answer

– Adam Schneider
Nov 22 '18 at 3:15

add a comment |

<div id="content" style="height: auto;">

– kaluogh
Nov 22 '18 at 3:07

I'm sorry I don't understand your comment.

– Adam Schneider
Nov 22 '18 at 3:10

1

use <div id="content" style="height: auto;"> replace <div id="content"> in studentawards.html

– kaluogh
Nov 22 '18 at 3:11

Maybe i make a misstic, if so i'm sorry.

– kaluogh
Nov 22 '18 at 3:12

accept my edit and I will give you the answer

– Adam Schneider
Nov 22 '18 at 3:15

<div id="content" style="height: auto;">

– kaluogh
Nov 22 '18 at 3:07

I'm sorry I don't understand your comment.

– Adam Schneider
Nov 22 '18 at 3:10

use <div id="content" style="height: auto;"> replace <div id="content"> in studentawards.html

– kaluogh
Nov 22 '18 at 3:11

Maybe i make a misstic, if so i'm sorry.

– kaluogh
Nov 22 '18 at 3:12

accept my edit and I will give you the answer

– Adam Schneider
Nov 22 '18 at 3:15

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk