Picture for reference. https://i.stack.imgur.com/njBYz.png
I am currently working on a final website for my html and css web development class. The one problem I keep running into is on my only 2 column page the footer is aligned left. I would like the footer to sit below the two column area, but still be contained within the #wrapper. Also, when I add a background color to the footer area it also adds it to the 2 column section. I'm thinking they are somehow connected but I do not know how to fix it.
body {
background-image: url(map.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-family: "Lucida Console", "Courier New", monospace;
}
h1 {
text-align: center;
font-size: 3em;
background-color: #ffca68;
}
nav {
text-align: center;
}
section {
float: left;
}
.left {
float: left;
width: 30%;
padding-bottom: 5px;
}
.right {
float: right;
width: 70%;
}
footer {
text-align: center;
}
#map {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
div nav {
font-size: 2em;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
border-top: none;
background-color: #ffe5b4;
min-width: 900px;
max-width: 1280px;
border: 2px solid #ffca68;
border-top: none
}
main {
padding-left: 7.5px;
padding-right: 7.5px;
}
a {
text-decoration: none;
}
footer {
text-align: center;
}<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>OSHelper Resources</title>
<link rel="stylesheet" href="oshelper.css">
</head>
<div id="wrapper">
<header>
<h1>OSHelper Resources</h1>
</header>
<body>
<nav>
<a href="index.html">Home</a> <a href="guides.html">Guides</a> <a href="resources.html">Resources</a> <a href="advice.html">Advice</a>
</nav>
<main>
<h2>Resources for your benefit</h2>
<p> This is where we keep and organize the many resources that you are sure to use while you play this game. From calculators and wikis to guides created by other players.</p>
<div >
<h3>OSRS Wiki</h3>
<p>This is the official wiki page for the game. It is extremely helpful for every player. It has information about quests, items, monsters, activities, and much more. We recommend using this everytime you have a question about the game.</p>
<h3>Runelite Client</h3>
<p>This is a very helpful client for playing the game. Clients are used to play the game, but they have especially helpful plugins and other useful tools that can be used while playing the game. This client is the most popular and helpful client
out there. </p>
<h3>Oldschool Tools</h3>
<p>Very useful website. It housed many different calculators, but most notably their skill calculators. These calculators tell you how much you need to train and how much in game currency you will need to spend to level up each skill.</p>
<h3>Official OSRS Website</h3>
<p>This is the official website. You can access your account and other official resources here. Again, be careful of fake sites that will try and steal your information.</p>
<h3>OSRS Guide</h3>
<p>Your one stop shop for many different guides reguarding the game. From beginner to advanced guides, you will definitely get some use out of this site.</p>
</div>
<div >
<nav>
<a href="https://oldschool.runescape.wiki"><img src="wiki.jpg" alt="Wiki"></a><br>
<a href="https://runelite.net"><img src="runelite.jpg" alt="Runelite"></a><br>
<a href="https://oldschool.tools"><img src="tools.jpg" alt="Oldschool Tools" height="110"></a><br>
<a href="https://www.oldschool.runescape.com"><img src="official.jpg" alt="Official" height="100"></a><br>
<a href="https://www.osrsguide.com"><img src="guide.jpg" alt="OSRS Guide" height="110"></a><br>
</nav>
</div>
</main>
</body>
<footer>
Copyright © 2022 OSHelper
</footer>
</html>CodePudding user response：
The issue is occurring as you have not cleared the float. There are various methods of 'float clearing'. Here are some solutions:
1. Use clear
.clear {
clear: both;
}
<main>
<h2></h2>
<p> </p>
<div ></div>
<div ></div>
<div ></div>
</main>
or
2. Use overflow: hidden
.main {
overflow:hidden;
}
CodePudding user response：
Your HTML was invalid. See the changes below. All content needs to be in body.
Remove all float's. I replaced it with flex and added a new parent for .left and .right. Called it .flex-wrapper.
Then just add a height to .wrapper and use position: absolute; on footer. Then just add some padding.
html,
body {
height: 100%;
}
body {
background-image: url(map.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-family: "Lucida Console", "Courier New", monospace;
}
h1 {
text-align: center;
font-size: 3em;
background-color: #ffca68;
}
nav {
text-align: center;
}
.left {
width: 30%;
padding-bottom: 5px;
}
.right {
width: 70%;
}
footer {
text-align: center;
}
#map {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
div nav {
font-size: 2em;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
border-top: none;
background-color: #ffe5b4;
/*min-width: 900px;*/
max-width: 1280px;
border: 2px solid #ffca68;
border-top: none height: 100%;
min-height: 100%;
position: relative;
}
.flex-wrapper {
display: flex;
}
main {
padding-left: 7.5px;
padding-right: 7.5px;
padding-bottom: 2em;
}
a {
text-decoration: none;
}
footer {
text-align: center;
position: absolute;
bottom: 1em;
width: 100%;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OSHelper Resources</title>
<link rel="stylesheet" href="oshelper.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>OSHelper Resources</h1>
</header>
<nav>
<a href="index.html">Home</a> <a href="guides.html">Guides</a> <a href="resources.html">Resources</a> <a href="advice.html">Advice</a>
</nav>
<main>
<h2>Resources for your benefit</h2>
<p> This is where we keep and organize the many resources that you are sure to use while you play this game. From calculators and wikis to guides created by other players.</p>
<div >
<div >
<h3>OSRS Wiki</h3>
<p>This is the official wiki page for the game. It is extremely helpful for every player. It has information about quests, items, monsters, activities, and much more. We recommend using this everytime you have a question about the game.</p>
<h3>Runelite Client</h3>
<p>This is a very helpful client for playing the game. Clients are used to play the game, but they have especially helpful plugins and other useful tools that can be used while playing the game. This client is the most popular and helpful client
out there. </p>
<h3>Oldschool Tools</h3>
<p>Very useful website. It housed many different calculators, but most notably their skill calculators. These calculators tell you how much you need to train and how much in game currency you will need to spend to level up each skill.</p>
<h3>Official OSRS Website</h3>
<p>This is the official website. You can access your account and other official resources here. Again, be careful of fake sites that will try and steal your information.</p>
<h3>OSRS Guide</h3>
<p>Your one stop shop for many different guides reguarding the game. From beginner to advanced guides, you will definitely get some use out of this site.</p>
</div>
<div >
<nav>
<a href="https://oldschool.runescape.wiki"><img src="wiki.jpg" alt="Wiki"></a><br>
<a href="https://runelite.net"><img src="runelite.jpg" alt="Runelite"></a><br>
<a href="https://oldschool.tools"><img src="tools.jpg" alt="Oldschool Tools" height="110"></a><br>
<a href="https://www.oldschool.runescape.com"><img src="official.jpg" alt="Official" height="100"></a><br>
<a href="https://www.osrsguide.com"><img src="guide.jpg" alt="OSRS Guide" height="110"></a><br>
</nav>
</div>
</div>
</main>
<footer>
Copyright © 2022 OSHelper
</footer>
</div>
</body>
</html>