CSS search button style being overridden by User Agent Stylesheet - html

When the code below renders in ANY browser, the user agent stylesheet is overriding the form.example in my CSS for the search button. The button is appearing small and not the same size as the input box as it used to. I have confirmed this using the browser console. It's strange because the same CSS has been working fine for months and I haven't changed anything. It stopped working all of a sudden. Strangely, when I run the same code in https://www.codeply.com/p it seems to render correctly.
Here is code:
body {
margin: 0;
height: 100%;
font-family: Courier New, monospace; color: white;
}
{
box-sizing: border-box;
font-family: Courier New, monospace; color: white;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the content */
.content {
background-color: rgb(48, 10, 36);
padding: 10px;
height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
/* Style the footer bar */
.footer {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the footer links */
.footer a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.footer a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the footer
.footer {
background-color: #333;
padding: 10px;
color: white;
}
*/
/* Style the search box */
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
body {
font-family: Courier New, monospace;
}
* {
box-sizing: border-box;
}
form.example
width: 80%;
background: #f1f1f1;
}
}
table.example
width: 100%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 30%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ramster</title>
<link rel="stylesheet" href="/static/index.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
</head>
<body>
<div class="topnav">
Home
Leagues
Teams
Players
</div>
<div class="content">
<h2>Ramster</h2>
<p>A place to play</p>
<form class="example" method="post" action="" style="margin:left;max-width:600px">
<input type="text" placeholder="Search by team or player" name="name">
<button type="submit">Search</button>
</form>
<p></p>
</div>
<div class="content">
<table class="example">
<thead>
<tr>
<th colspan="1">Name</th>
<th colspan="1">Position</th>
<th colspan="1">Team</th>
<th colspan="1">Buy</th>
</tr>
</thead>
{% for item in data %}
<tbody>
<tr>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>Buy</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div class="topnav">
Login
Register
Logout
</div>
</body>
</html>


You missed the { in form.example and got one closing } to much after it. Therefore its missing on input[type=text] {
Should work:
form.example {
width: 80%;
background: #f1f1f1;
}
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
}
JSFiddle
OR
body {
margin: 0;
height: 100%;
font-family: Courier New, monospace; color: white;
}
{
box-sizing: border-box;
font-family: Courier New, monospace; color: white;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the content */
.content {
background-color: rgb(48, 10, 36);
padding: 10px;
height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
/* Style the footer bar */
.footer {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the footer links */
.footer a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.footer a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the footer
.footer {
background-color: #333;
padding: 10px;
color: white;
}
*/
/* Style the search box */
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
}
body {
font-family: Courier New, monospace;
}
* {
box-sizing: border-box;
}
form.example {
width: 80%;
background: #f1f1f1;
}
table.example {
width: 100%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 30%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ramster</title>
<link rel="stylesheet" href="/static/index.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
</head>
<body>
<div class="topnav">
Home
Leagues
Teams
Players
</div>
<div class="content">
<h2>Ramster</h2>
<p>A place to play</p>
<form class="example" method="post" action="" style="display:inline;">
<input type="text" placeholder="Search by team or player" name="name">
<button type="submit">Search</button>
</form>
<p></p>
</div>
<div class="content">
<table class="example">
<thead>
<tr>
<th colspan="1">Name</th>
<th colspan="1">Position</th>
<th colspan="1">Team</th>
<th colspan="1">Buy</th>
</tr>
</thead>
{% for item in data %}
<tbody>
<tr>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>Buy</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div class="topnav">
Login
Register
Logout
</div>
</body>
</html>


It seems there an update in the API or something.
I would suggest to set the overwritten styles an !important flag and/or try a browser style-reset:
td /*!important flag*/
{
border: 1px solid #333 !important;
}
*, html /*set every element an initial style (style-reset)*/
{
margin: 0;
padding: 0;
}

Related

Why Doesn't .container Also Change Headings to Black and White in #media print{}

Just curious, why when I do print preview the headings are still colored after I've set a class selector to black? If by putting .container within the media rule and setting the color too black, should every text including headings be set to black? I know I can easily add h1, h2... I'm just curious as to why I can not set a selector to a specific color and everything within that selector be set to that during print? Thanks for the feedback!
/* reset style */
html {
font-size: 12px;
}
/* body and page container */
.container {
max-width: 600px;
margin: 0 auto;
border: 3px red;
}
/* headings */
header {
text-align: center;
padding: .4em;
background-color: darkgrey;
}
h1 {
text-shadow:2px -4px 5px black;
color: #EADCDC;
font-size: 5em;
}
h2 {
color: brown;
font-size: 3em;
}
p {
font-size: 1.2em;
line-height: 1.4em;
}
body {
font-family: Tahoma, Arial, Helvetica, sans-serif;
background-color: #dee9f9;
}
h3 {
color: green;
font-size: 2em;
}
article {
background-color: gold;
padding: 3%;
}
.accent {
text-decoration: underline;
text-align: center;
line-height: .8em;
}
/* unordered list */
ul {
list-style: circle;
font-size: 1.2em;
line-height: 1.4em;
}
aside {
background-color: #EADCDC;
width: 45%;
padding: 2%;
margin: 2%;
box-shadow: 3px 3px 3px black;
border-radius: 30px;
float: right;
line-height:4em;
}
footer {
padding: 0.6em;
color: ivory;
background-color: darkgrey;
text-align: center;
}
/// This is what I am referring to
#media print {
body, .container, aside, article {
color: black;
background-color: white;
box-shadow: none;
}
}
#page {
margin: 1in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battle</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Super Battle</h1>
</header>
<aside>
<h2 class="accent"> ARE YOU READY?</h2>
<h3>DATE</h3>
<p>10/31/2022</p>
<p>12AM - 12pm</p>
<h3>LOCATION</h3>
<p>LAS VEGAS</p>
<p>NEVADA</p>
<p>MGM GRAND CASINO</p>
</aside>
<article>
<h3>PRICES</h3>
<p>$200General</p>
<p>$400 VIP</p>
<p>$1000 ALL ACCESS</p>
<h3>SPONSORS</h3>
<ul>
<li>ELON MUSK</li>
<li>DONALD TRUMP</li>
<li>TEKASHI 69</li>
<li>BARACK OBAMAS X WIFE</li>
</ul>
</article>
<footer>
<p> www.LASVEGASBATTLE.us</p>
</footer>
</div>
</body>
</html>

Background Color in CSS Going Over in Table

In my HTML project, I set the background color of a table tr to white, but it goes over the edge of the table with padding = 10px;
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>--!</title>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#300&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
background-color: #e8e8e8;
font-family: 'Kumbh Sans', sans-serif;
}
.topnav {
background-color: #11a642;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 18px 20px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #0a6127;
}
.topnav a.active {
background-color: #11a642;
color: white;
}
.topnav a.active:hover {
background-color: #0a6127;
}
#noCss {
display: none;
}
#page {
margin-left: 50px;
margin-right: 50px;
}
tr, td {
border: 1px solid black;
}
table {
width: 100%;
}
.box {
width: 100%;
padding: 10px;
background-color: white;
}
</style>
<body>
<div class = "topnav">
<b>--</b>
My Folders
Search
Sign up
Log In
</div>
<br><br>
<center>
<div id="noCss" style="background-color: #a7ab35;width: 70%; border: 1px solid black;">
<br>
<h2>⚠️ Uh-oh ⚠️</h2>
It looks like the CSS didn't load. Please reload the page.
<br><br><span style="color:#a7ab35;">.</span>
</div>
</center>
<div id="page">
<h2>--</h2>
<table>
<tr>
<td><div class="box">
hi
</div></td>
</tr>
</table>
</div>
</body>
</html>
Notice when you run it the white background sticks out.
Image of background going over edge
How can I fix this?

try this
You given here width:100%;padding:10px; makes
width = 100% + 20px (both left and right)
so, one method to using calc() in CSS to minus 20px padding
.box {
padding: 10px;
background-color: white;
width: calc(100% - 20px); // minus padding of both left and right
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>--!</title>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#300&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
background-color: #e8e8e8;
font-family: 'Kumbh Sans', sans-serif;
}
.topnav {
background-color: #11a642;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 18px 20px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #0a6127;
}
.topnav a.active {
background-color: #11a642;
color: white;
}
.topnav a.active:hover {
background-color: #0a6127;
}
#noCss {
display: none;
}
#page {
margin-left: 50px;
margin-right: 50px;
}
tr, td {
border: 1px solid black;
}
table {
width: 100%;
}
.box {
width: calc(100% - 20px);
padding: 10px;
background-color: white;
}
</style>
<body>
<div class = "topnav">
<b>--</b>
My Folders
Search
Sign up
Log In
</div>
<br><br>
<center>
<div id="noCss" style="background-color: #a7ab35;width: 70%; border: 1px solid black;">
<br>
<h2>⚠️ Uh-oh ⚠️</h2>
It looks like the CSS didn't load. Please reload the page.
<br><br><span style="color:#a7ab35;">.</span>
</div>
</center>
<div id="page">
<h2>--</h2>
<table>
<tr>
<td><div class="box">
hi
</div></td>
</tr>
</table>
</div>
</body>
</html>
Or
no need to assign width:100%; actually in here one having given width:100%
so just remove the width:100%;
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>--!</title>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#300&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
background-color: #e8e8e8;
font-family: 'Kumbh Sans', sans-serif;
}
.topnav {
background-color: #11a642;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 18px 20px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #0a6127;
}
.topnav a.active {
background-color: #11a642;
color: white;
}
.topnav a.active:hover {
background-color: #0a6127;
}
#noCss {
display: none;
}
#page {
margin-left: 50px;
margin-right: 50px;
}
tr, td {
border: 1px solid black;
}
table {
width: 100%;
}
.box {
padding: 10px;
background-color: white;
}
</style>
<body>
<div class = "topnav">
<b>--</b>
My Folders
Search
Sign up
Log In
</div>
<br><br>
<center>
<div id="noCss" style="background-color: #a7ab35;width: 70%; border: 1px solid black;">
<br>
<h2>⚠️ Uh-oh ⚠️</h2>
It looks like the CSS didn't load. Please reload the page.
<br><br><span style="color:#a7ab35;">.</span>
</div>
</center>
<div id="page">
<h2>--</h2>
<table>
<tr>
<td><div class="box">
hi
</div></td>
</tr>
</table>
</div>
</body>
</html>

Why is there white space at the bottom of my web page when run in the browser?

When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot

Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}

background-color doesn't work when using flexbox

I started using flexbox for my footers and now on all of my pages with forms the background-color is now the default white. Here is an example of one of my pages:
login.php
body {
background-color: #211e1e;
display: flex;
flex-direction: column;
height: 95vh;
}
h1 {
color: #99cc00;
text-align: center;
}
.content {
flex: 1 0 auto;
}
footer {
text-align: center;
font-weight: lighter;
color: #99cc00;
font-size: 10px;
flex-shrink: 0;
}
h3 {
position: absolute;
font-weight: bold;
color: #99cc00;
font-size: 15px;
width: 100%;
top: 91.5%;
}
.button {
background-color: #211e1e;
color: white;
font-size: 24px;
/*padding: 15px 50px;*/
transition-duration: .4s;
border: greenyellow;
width: 250px;
/* width of button */
height: 50px;
/* height of button */
}
.buttonColor:hover {
color: black;
background-color: greenyellow;
}
h1 {
text-align: center;
bottom: 25%;
}
content {
align-items: center;
justify-content: center;
}
.signin {
color: #99cc00;
margin: auto;
font-size: 24px;
}
.loginInput {
font-size: 24px;
}
.loginButton {
background-color: #211e1e;
color: white;
font-size: 24px;
padding: 10px 50px;
transition-duration: .4s;
border: greenyellow;
}
.loginButtonColor:hover {
color: black;
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="../../favicon.ico">
<meta charset="UTF-8">
<title>TapLovers</title>
<link rel="stylesheet" href="../background.css">
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class=content>
<h1><img src="../../36x36-icon.png">apLovers</h1>
<form class="signin">
<input type="text" email="email" placeholder="Email" class="loginInput"><br>
<input type="text" password="password" placeholder="Password" class="loginInput"><br>
<input type="submit" name="submit" id="login" class="loginButton loginButtonColor" value="Login To TapLovers!" /><br><br>
<a href="../register/register.php">
<font color="#99cc00">Create a FREE TapLovers Account!</font>
</a>
</form>
</div>
<footer>
<h3><img src="../../favicon.ico">apLovers</h3><br>&copy 2018 TapLovers, All Rights Reserved
</footer>
</body>
</html>
Also I was trying to center my forms and my title using flexbox as well and I haven't gotten that working either. I'm not really sure what other details would be useful for this particular problem. If you need any more details just reply below and I'll answer them as they come out.
EDIT: The snippet that compiles on stack overflow shows my background just fine. What's more is if I use ctrl+shift+i on my page then the background works but if I just reload on my page then the background will turn white.

I did not see the issue with background fluctuations. I think it is a delay in the page load. I have added comments to help with the flexbox centering of items.
/*CSS reset of browser agent. Removes the horizontal scroll currently happening in page.*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #211e1e;
display: flex;
flex-direction: column;
/* No need to restrict the height.
height: 95vh;*/
}
h1 {
color: #99cc00;
text-align: center;
}
.content {
flex: 1 0 auto;
/*make the content div flex so that the form can take the center alignment from flexbox properties. Add the centering here and avoid the margin: auto property */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer {
text-align: center;
font-weight: lighter;
color: #99cc00;
font-size: 10px;
flex-shrink: 0;
}
h3 {
position: absolute;
font-weight: bold;
color: #99cc00;
font-size: 15px;
width: 100%;
top: 91.5%;
}
.button {
background-color: #211e1e;
color: white;
font-size: 24px;
/*padding: 15px 50px;*/
transition-duration: .4s;
border: greenyellow;
width: 250px;
/* width of button */
height: 50px;
/* height of button */
}
.buttonColor:hover {
color: black;
background-color: greenyellow;
}
h1 {
text-align: center;
bottom: 25%;
}
/*Add flexbox style the inputs as blocks and remove <br> from HTML*/
.signin {
color: #99cc00;
font-size: 24px;
display: flex;
flex-direction: column;
}
.signin>* {
margin: 5px 0;
}
.loginInput {
font-size: 24px;
}
.loginButton {
background-color: #211e1e;
color: white;
font-size: 24px;
padding: 10px 50px;
/*Please check your animation ??
transition-duration: .4s;*/
/*add border size and transparency 1px solid*/
border: 1px solid greenyellow;
}
.loginButtonColor:hover {
color: black;
background-color: greenyellow;
}
<div class="content">
<h1><img src="../../36x36-icon.png">apLovers</h1>
<form class="signin">
<input class="loginInput" placeholder="Email" type="text"> <input class="loginInput" placeholder="Password" type="text"> <input class="loginButton loginButtonColor" id="login" name="submit" type="submit" value="Login To TapLovers!"> <font color="#99CC00">Create a FREE TapLovers Account!</font>
</form>
</div>
<footer>
<h3><img src="../../favicon.ico">apLovers</h3>
<p>© 2018 TapLovers, All Rights Reserved</p>
</footer>

divs/footer ignoring other divs existence

I can't wrap my head around this one. I've been working on it for a bit but everything I try and everything I read fails to truly fix the problem.
Problem 1:
My div ".page" is ignoring all of its children divs. Setting it to 100% height and the background color to red for testing results in it only acknowledging certain divs (the .image__header div and the footer). I have set the html and body to width and height 100%; however, this does not resolve the problem.
Problem 2:
This leads to my second problem which would probably be solved by the prior problems solution. Adding the footer and setting a height and background color places the footer directly below the .image__header div. This emphasizes my belief that the other sections (main and nav) are being completely ignored as if they aren't even taking up space (nav is a fixed element glued to the top of my page and main doesn't work even if I change it to a div and "display:block" as it should be innately anyway).
My footer should simply fall below the main section but it fails to acknowledge main's existence.
A couple snippets of code although I have linked the brief CodePen at the bottom.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
img {
display: block;
margin: 0 auto;
}
.page {
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
* ---
* Adding a clearfix to .main__inner resolved this.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen link with full code
To reiterate: I don't need a sticky footer solution or a fixed footer solution. I just need the footer to acknowledge other divs and sit below the main section. Why is the main section being ignored?
Any help is greatly appreciated. Thanks for your time.

Seems like you simply should add a clearfix to your .main__inner block, something like this:
.main__inner:after {
content: '';
display: table;
clear: both;
}
Check out:
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen

Just put float:left; to both containers. I recommend using a div with class instead of footer though... or any semantic elements to be honest.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body,
html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1,
h2,
h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3,
h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
float: left;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
float: left;
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div>
<!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul>
<!-- end nav links -->
</div>
<!-- end .nav__inner -->
</nav>
<!-- end nav -->
<main class="main">
<div class="image__header">
</div>
<!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's
<snip>Raycast</snip> and
<snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a
<snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a
<snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div>
<!-- end .main__inner -->
</main>
<!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div>
<!-- end .footer__inner -->
</footer>
<!-- end footer -->
</div>
<!-- end .page__inner -->
</div>
<!-- end .page -->
</body>
</html>

remove float: left from the section with class .content
http://codepen.io/anon/pen/XMrVVv?editors=1100