I am trying to finish home project and I am stuck with header element box not being within body box element. Can you explain to me why is that happening and how to fix it?
* {
border: 2px solid red;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
font-size: 22px;
color: seashell;
opacity: 0.9;
font-family: Helvetica, 'Times New Roman', sans-serif;
margin: 0 auto;
min-height: 100%;
}
header {
height: 69px;
width: 100%;
border-bottom: 1px solid seashell;
position: fixed;
display: inline;
}
<body>
<!--Fixed header-->
<header>
<img src="resources/tea-cozy-logo.png" alt="logo of a tea company" />
<div class="navigation">
Mission
Featured Tea
Locations
</div>
</header>
</body>
Related
I tried to add a verticle bar thats stuck to the top right off my screen but it dosent show up for some reason, i tried everything i could. here is my code.
css: used for the style of my site, just uhh regular old code expect that it show anything thats located at the bottom of my website expressed by the overflow hidden thing. Anyways inspect element tells me that my gradient bar is at the bottom of the site even though its not supposed to be. see last couple lines of the css code for the bar.
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#gradient-bar {
background: linear-gradient(to right, #000000, #ffffff);
height: 20px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eaglercraft.xyz</title>
</head>
<body>
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div class="back">
<pi></pi>
</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="updates">
<div class="Texty">
<p> Be sure to join our discord!</p>
<div class="discord">
<ul style="color: black; font-weight: 100;"></ulstyle>Stay up to date with the latest news, contests, giveaways and other cool things: discord.gg :)</ul>
</div>
<div class"dickkord">
<p style="color: #298bc4"> Minecraft 1.8</p>
<ul style="color: black;"></ulstyle>Diorite: Crafted using 2 cobblestone and 2 Nether quartz in a checkerboard pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Andesite: Crafted using 1 cobblestone and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Granite: Crafted using 1 Nether quartz and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Coarse Dirt: Replaces grassless dirt found in mega taiga, mesa and savanna biomes. It is slightly darker than regular dirt. Tilling it with a hoe turns it to regular dirt. Can be crafted using dirt and gravel in a 2x2 checkered pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine: Generates in ocean monuments and can be crafted using prismarine shards. Cracks in prismarine slowly change color.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine Bricks: Generates in ocean monuments and can be crafted using prismarine shards.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Dark Prismarine: Generates in ocean monuments and can be crafted using prismarine shards and an ink sac.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Red Sandstone: Can be crafted using 4 red sand in a square. Comes in chiseled, smooth, stair, and slab forms. Generated only in Mesa biomes at cave entrances.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Iron Trapdoor: Can only be opened and closed using redstone. Crafted using iron ingots in a 2x2 pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Sea Lantern: Generates in ocean monuments and can be crafted using prismarine shards and prismarine crystals. Emits light and has an animated texture.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Wet Sponge: Obtained when a sponge soaks up water. Smelting yields a dry sponge. Emits water dripping particles. Dropped by elder guardians.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Slime Block: Crafted using 9 slime balls. Players and mobs bouncing on top. Pushes and pulls blocks when moved by a piston. Does not affect falling items.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Banners: Crafted like signs but using wool. Can be stacked to 16 and have up to 6 layers. Can be placed on walls or on the ground. Different patterns can be made using dyes and certain items.</ul>
</div>
</div>
</div>
<div id="baro">
<select id="menu1">
<option selected value="latest">Latest Releases</option>
<option value="1.5">1.5</option>
<option value="1.8">1.8</option>
</select>
<select id="menu2" style="display: none;">
</select>
<button id="play-button" style="background-color: #f0c43c; border-radius: 20%; align-content: center;">Play</button>
</div>
<script src="epic.js"></script>
</body>
</html>
Reasoning:
Due to the 'back' class div set to the height of '100vh' (Vertical Height), The following div with static positioning will sit just below the div with the class of 'back'
Solution:
Rearranging your code makes it visible just under the blue bar
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="back">
<pi></pi>
</div>
To put it in the very top of the page I used the following
HTML:
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="bar">
<div id="close-button" style="top: 20px">×</div>
<!-- style attr to fix the cross -->
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div class="back">
<pi></pi>
</div>
CSS:
#gradient-bar p {
margin-top: 0;
position: relative;
}
And to half it you could set #gradient-bar width to 50%
And to put it in the top right corner you could put
#gradient-bar {
position: absolute;
right: 0;
}
Hoped I helped in some way!
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;
}
I'm working on a Site for myself, but I have no clue how I get the Navigationbar centered in the site.
I thought that maybe someone else has an idea :) the whole navigation bar is slightly to the left & I don't know how to fix it.. Hope you guys out there can do this :) I'm a beginner # coding & I have so much more to learn ..
screenshot of the page
logo
thank you for your help :)
Html:
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li class="logo">SueZ Logo</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>Copyright © 2020 SueZ</footer>
</body>
</html>
CSS:
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
height: 150px;
padding: 20px;
text-align: center;
}
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
text
}
header .logo a {
background-image: url(Fotos/SueZ_Logo_Red_BG_Transparent.PNG);
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 190px;
position: relative;
text-indent: -9999999px;
top: -40px;
width: 200px;;
margin-left: 20%;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
Here I made a snippet for the solution of your issue. check it. Hope it helps.
Updated CSS marked with /*----------*/
...............................................................................
A TIP for you
Don't use height.
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
/*------------------------*/
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
/*height: 150px;*/
padding: 40px;
text-align: center;
position:relative;
}
.logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}
.logo img{width:100%;}
/*------------------------*/
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
/*------------------------*/
nav li:last-child{margin-right:0}
nav li:nth-child(2){margin-right:120px}
/*------------------------*/
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://i.stack.imgur.com/yfW19.png" alt="logo">
</div>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>
Copyright © 2020 SueZ
</footer>
My website wrapper will not fill in the entire height of the page. I have tried adjusting the min-height to 100%, tried just height 100% as well. I have tried auto height. I am sure it is something simple I am missing but I can't seem to find the solution to this problem. I have also tried just adding the CSS to the HTML page using the tag but that does not work either.
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005D;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px" />
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
try it:
html,
body {
height: 100%;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005d;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
height: 100%;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005d;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img
src="Images/GCSCU_Color.png"
alt="Logo"
style="float:left;width:120px;height:70px; padding-right:10px"
/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>
This is just a test sentence for the main section of the
page.
</h2>
</main>
</div>
</div>
Please give height: 100%; and margin: 0; for html and body.
Your css will have below changes:
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
height: 100%;
margin: 0;
}
html {
height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
See working jsfiddle - here
Instead of percentage use Viewport units, in this case vh for height:
html, body {
min-height:100vh;
margin:0;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100vh;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
<title>CRIF Access Homepage</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px"/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
</body>
</html>
I'm wondering why do you want (or need) the wrapper, you can do the job only with body.
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