I am losing my mind, this has never happen to me.

HTML & CSS
#1

I’m creating this website https://www.triviaintoxication.com/ and I am having a bugger of a time with my html/css footer.

Here’s my HTML:
[php]<?php
require_once ‘lib/includes/utilities.inc.php’;

use website_project\trivia_game\GenerateGame as Generate;

$dailyTen = [];
$categories = [‘movie’, ‘space’];
$generate = new Generate();

$result = $generate->checkTriviaTable();

if ($result) {
$data = $generate->readTriviaQuestions($categories);

if ($data) {
    $dailyTen = $generate->dailyQuestions($data);
    $generate->updateTriviaQuestions($dailyTen);
}

}
?>

Trivia IntoXication

TriviaIntoXication

Don't Drive Drunk, Play this Game Instead!

        <div id="mainGame">
            <div id="screen">
                <!-- The Question that is pulled in from PHP and JavaScript -->
                <h2 id="question">Question</h2>
            </div>
            <!-- The Possible Answers that is also pulled in from PHP and pure JavaScript -->
            <button id="answer1" class="answers enable" data-answer="1">&nbsp;</button>
            <button id="answer2" class="answers enable" data-answer="2">&nbsp;</button>
            <button id="answer3" class="answers enable" data-answer="3">&nbsp;</button>
            <button id="answer4" class="answers enable" data-answer="4">&nbsp;</button>

            <div id="scoring">
                <h2><span id="correct">&#10004;  0</span><span id="wrongText">&#10004; 0</span></h2>
            </div>

            <div id="display">
                <h2 id="clock">&nbsp;</h2>
                <button id="next">Next</button>
            </div>


        </div>

        <div id="info">
            <p>I have decided to chunk jQuery to the trash bin and convert this game over to pure JavaScript (some call it vanilla JavaScript), so when I eventually deem this HTML/CSS game worthy enough for a tutorial it will be more portable. It should be also easier for people to write javascript, for in my opinion learning javascript makes it easier to understand and there really is not that much more code added.</p>
        </div>
        
        <div id="myFooter">
            <p class="footer-text">John R. Pepp</p>
        </div>
        
    </div>
    <script src="lib/js/trivia.js"></script>
</body>
[/php]

and here’s my css (it’s a Sass file scss):

[code]@import url(“https://fonts.googleapis.com/css?family=Merriweather|Raleway”);
/* Color Theme*/
/*
Created on : Feb 16, 2016, 8:22:58 AM
Author : strider64
/
/ http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, textarea, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }

body {
line-height: 1; }

ol, ul {
list-style: none; }

blockquote, q {
quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none; }

table {
border-collapse: collapse;
border-spacing: 0; }

/*******************************************
GENERAL CSS STYLING
********************************************/

  • {
    padding: 0;
    margin: 0;
    box-sizing: border-box; }

.enable {
background-color: #F19F4D; }
.enable:hover {
background-color: #c86c10; }

.disable {
background-color: #999999; }

.correct {
background-color: green; }

.wrong {
background-color: red; }

.wrongText {
color: red; }

body {
background-color: #F2F2F2; }

/*******************************************
TYPOGRAPHY CSS STYLING
********************************************/
h1, h2, h3, th {
font-family: ‘Merriweather’, serif; }

p, td {
font-family: ‘Raleway’, sans-serif; }

/* SMARTPHONE STYLING /
@media only screen and (max-width: 480px) {
/******************************************
HEADING CSS STYLING
********************************************/
div#heading {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 50px;
background-color: #2E2E2E;
text-align: center;
padding: 5px; }
div#heading h1 {
font-size: 1.2rem;
color: #fff; }
div#heading h1 span#toxic {
font-size: 1.8rem;
color: #F19F4D; }
div#heading h2#subheading {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.0rem;
line-height: 1.5;
color: lightgreen;
font-style: italic; }

/*******************************************
GAME CSS STYLING
********************************************/
div#mainGame {
display: block;
width: 100%;
height: auto;
background-color: #2E2E2E;
padding: 10px; }
div#mainGame div#screen {
display: inline-block;
width: 100%;
max-width: 100%;
height: 200px;
background-color: #909090;
padding: 10px; }
div#mainGame div#screen h2#question {
font-size: 1.02rem;
line-height: 1.5;
color: #fff; }
div#mainGame button.answers {
display: block;
width: 100%;
height: 50px;
border: none;
outline: none;
cursor: pointer;
font-size: 1.0rem;
line-height: 50px;
color: #fff;
text-align: left;
padding: 0 10px;
margin: 5px 0; }
div#mainGame div#scoring {
display: block;
width: 100%;
height: 50px;
background-color: #fff;
text-align: center; }
div#mainGame div#scoring h2 span#correct {
float: left;
font-size: 1.4rem;
line-height: 50px;
color: green;
padding-left: 40px; }
div#mainGame div#scoring h2 span#wrongText {
float: right;
font-size: 1.4rem;
line-height: 50px;
color: red;
padding-right: 40px; }
div#mainGame div#display {
display: block;
width: 100%;
height: 50px;
background-color: #F19F4D;
text-align: center; }
div#mainGame div#display h2#clock {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4rem;
line-height: 50px;
color: green;
text-transform: capitalize;
padding-left: 40px; }
div#mainGame div#display button#next {
float: right;
display: block;
width: 100px;
height: 30px;
border: none;
outline: none;
cursor: pointer;
background-color: #fff;
font-size: 1.2rem;
color: green;
margin-top: 10px;
margin-right: 40px; }
div#mainGame div#display button#next:hover {
color: #2E2E2E; }

div#info {
border: 10px solid #2e2e2e;
background-color: #F19F4D;
padding: 10px; }
div#info p {
font-size: 1.0rem;
line-height: 1.5;
font-weight: bold; }

div#footer {
border: 5px solid #fff;
width: 100%;
height: 50px;
background-color: #2e2e2e;
text-align: center; }
div#footer p.footer-text {
font-size: 1.2rem;
line-height: 40px;
color: #fff; } }

@media only screen and (min-width: 978px) {
div#container {
display: block;
width: 100%;
max-width: 978px;
height: auto;
margin: 0 auto; }

/*******************************************
HEADING CSS STYLING
********************************************/
div#heading {
display: block;
width: 100%;
max-width: 75.000rem;
height: 100%;
min-height: 9.375rem;
background-color: #2E2E2E;
text-align: center;
padding: 1.250rem;
margin-bottom: 1.250rem; }
div#heading h1 {
font-size: 3.2rem;
color: #fff; }
div#heading h1 span#toxic {
font-size: 4.4rem;
color: #F19F4D; }
div#heading h2#subheading {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4rem;
line-height: 1.5;
color: lightgreen;
font-style: italic; }

div#mainGame {
float: left;
display: block;
width: 100%;
max-width: 489px;
height: auto;
background-color: #2e2e2e; }
div#mainGame div#screen {
display: inline-block;
width: 100%;
max-width: 489px;
height: 12.500rem;
background-color: #909090;
padding: 10px; }
div#mainGame div#screen h2#question {
font-size: 1.2rem;
line-height: 1.5;
color: #fff; }
div#mainGame button.answers {
display: block;
width: 100%;
max-width: 489px;
height: 50px;
border: none;
border-bottom: 2px solid #2e2e2e;
outline: none;
cursor: pointer;
font-size: 1.0rem;
line-height: 50px;
color: #fff;
text-align: left;
padding: 0 10px;
margin: 0; }
div#mainGame div#scoring {
display: block;
width: 100%;
max-width: 489px;
height: 50px;
background-color: #fff;
text-align: center; }
div#mainGame div#scoring h2 span#correct {
float: left;
font-size: 1.4rem;
line-height: 50px;
color: green;
padding-left: 40px; }
div#mainGame div#scoring h2 span#wrongText {
float: right;
font-size: 1.4rem;
line-height: 50px;
color: red;
padding-right: 40px; }
div#mainGame div#display {
display: block;
width: 100%;
height: 50px;
background-color: #F19F4D;
text-align: center; }
div#mainGame div#display h2#clock {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4rem;
line-height: 50px;
color: green;
text-transform: capitalize;
padding-left: 40px; }
div#mainGame div#display button#next {
float: right;
display: block;
width: 100px;
height: 30px;
border: none;
outline: none;
cursor: pointer;
background-color: #fff;
font-size: 1.2rem;
color: green;
margin-top: 10px;
margin-right: 40px; }
div#mainGame div#display button#next:hover {
color: #2E2E2E; }

div#info {
float: left;
display: block;
width: 100%;
max-width: 489px;
height: 500px;
background-color: lightgray;
padding: 20px; }
div#info p {
font-size: 1.2rem;
line-height: 1.5;
font-weight: bold; }

div#myFooter {
height: 50px;
background-color: #000;
text-align: center; }

p.footer-text {
font-size: 1.2rem;
line-height: 40px;
color: #fff; } }

/*# sourceMappingURL=stylesheet.css.map */
[/code]

I flushed my browser’s cache and stopped my sass preprocessor to use regular css to no avail. I inspected it with chrome’s developer’s tools and used https://validator.w3.org/ and https://jigsaw.w3.org/css-validator/ to check validation of my HTML and CSS … it passed. Maybe someone can check it with their browser? The funny thing is if I yank out height: 50px it works. Any help would be helpful and Thanks in advance from someone who is pulling out his hair.
John

#2

What a good night sleep can do and all over a simple clear: both; in CSS;

#myFooter { clear: both; display: block; width: 978px; height: 50px; background-color: #000; text-align: center; margin-top: 10px; p { font-size: 1.2rem; line-height: 40px; color: #fff; } }

Sponsor our Newsletter | Privacy Policy | Terms of Service