I created a file "index.html" and opened it on google chrome but a page doesn't show anything. I think that the problem is with my browser settings because that code worked before the system update. However, I can't find a solution. Here's my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="The page presents TOP 5 TV serials. Check them out!"/>
<meta name="keywors" content="TOP 5, serials, the best, the most interesting, watch, share">
<title>The best serials - TOP 5!</title>
<style>
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
background-color: black;
color: white;
text-align: center;
}
#nav
{
float: left;
background-color: lightgray;
width: 140px;
min-height: 620px;
padding: 10px;
}
#content
{
float: left;
width: 640px;
padding: 20px;
}
#ad
{
float: left;
background-color: lightgray;
width: 140px;
min-height: 620px;
padding: 10px;
}
#footer
{
clear: both;
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<h1>The best serials - TOP 5!</h1>
</div>
<div id="nav">
Dr House<br/>
True Detective<br/>
Breaking Bad<br/>
Big Bang Theory<br/>
The X Files<br/>
</div>
<div id="content">
House (also called House, M.D.) is an American television medical drama that originally ran on the Fox network for eight seasons, from November 16, 2004 to May 21, 2012. The show's main character is Dr. Gregory House (Hugh Laurie), a pain medication-dependent, unconventional, misanthropic medical genius who leads a team of diagnosticians at the fictional Princeton–Plainsboro Teaching Hospital (PPTH) in New Jersey.
<br/><br/>
The show's premise originated with Paul Attanasio, while David Shore, who is credited as creator, was primarily responsible for the conception of the title character. The show's executive producers included Shore, Attanasio, Attanasio's business partner Katie Jacobs, and film director Bryan Singer. It was filmed largely in Century City.
</div>
<div id="ad">
<img src="ad.jpg"/>
</div>
<div id="footer">
The best serials - TOP 5! © All rights reserved
</div>
</div>
</body>
</html>
Your title tag is broken.
Instead of <title>The best serials - TOP 5!</title=""> you should have <title>The best serials - TOP 5!</title>.
For more details: http://devdocs.io/html/element/title
And your doctype is also broken. Use <!DOCTYPE HTML> instead of <!DOCTYPE>.
For more details: https://developer.mozilla.org/en-US/docs/Glossary/Doctype
At the very top it has to be
<!DOCTYPE html>
<html>
not
<!DOCTYPE>
<html>
Related
Just starting out on html, how do I center the 'Webpage' Logo and remove margin to the right of that logo so the 'Home' can be in line to perform like a nav-bar. I added an image at the end of the code so you can look at the margin I'm trying to get rid of (don't know if that's even possible!).
……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet"/>
<style>
body{
margin:0;
background-color: rgb(36, 37, 37);
}
.container{
padding-top:3px;
padding-bottom:3px;
width: 100%;
background-color:#003333;
height: 50px
}
.title-box{
margin-left: 20px;
}
.title-box label{
margin: 5px;
width: 130px;
text-align: center;
color:#E0E0E0;
border-color:rgb(11, 107, 19);
border-style:double;
border-width: medium;
width: fit-content;
}
.tasks{
float: right;
}
.para{
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p{
margin: 0%;
color: #e1f2f7;
}
</style>
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991.
It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee.
It ran on a NeXT computer at the European Organization for Nuclear Research, CERN.
The first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html.
A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br>
A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a website, like our Computer Hope website.
<br><br>
When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
Add flex and align-items: center; to .container.
Remove the height on .container and use padding instead.
Remove float from .tasks and use margin-left: auto;.
Then you can adjust spacing between the a's using margin-right: on .tasks a
body {
margin: 0;
background-color: rgb(36, 37, 37);
}
.container {
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
background-color: #003333;
padding: 25px 0;
display: flex;
align-items: center;
}
.tasks {
margin-left: auto;
}
.tasks a {
color: #fff;
text-decoration: none;
margin-right: 1em;
}
.title-box {
margin-left: 20px;
}
.title-box label {
margin: 5px;
width: 130px;
text-align: center;
color: #E0E0E0;
border-color: rgb(11, 107, 19);
border-style: double;
border-width: medium;
width: fit-content;
}
.para {
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p {
margin: 0%;
color: #e1f2f7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
HOME
HOME
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991. It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee. It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. The first web page address
was http://info.cern.ch/hypertext/WWW/TheProject.html. A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web
page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br> A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a
website, like our Computer Hope website.
<br><br> When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
This question already has answers here:
Removing extra white space when using first-letter
(3 answers)
Closed 1 year ago.
I am just trying to layout some type of information page that has the question and then there is a it's answer. I have applied some indentation and make the first letter bigger of the paragraph. The problem is that there is a extra space under the first line. I don't want the extra space that is appeared after using ::before-letter pseudo selector. have any idea or trick...
Here is the code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: rgb(236, 195, 141);
}
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
li {
margin: 15px 10px;
font-size: 20px;
}
section {
background-color: rgb(194, 175, 212);
padding: 10px 20px;
}
h1 {
margin: 10px 0;
font-size: 30px;
}
p {
text-align: justify;
padding-right: 50px;
}
p::first-letter {
font-size: 55px;
padding-left: 30px;
}
footer {
background-color: rgb(236, 195, 141);
height: 30px;
text-align: center;
line-height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="main">
<h1>What you know about Technology?</h1>
<p class="para">Technology is the important part of our day to day life. We get up in the morning from the
ringing of our alarm clocks and go to bed at night after switching our lights off. All these luxuries
that we are able to afford are a resultant of science and technology. Most importantly, how we can do
all this in a short time are because of the advancement of science and technology only. It is hard to
imagine our life now without science and technology. Indeed our existence itself depends on it now.
Every day new technologies are coming up which are making human life easier and more comfortable. Thus,
we live in an era of science and technology.
Essentially, Science and Technology have introduced us to the establishment of modern civilization. This
development contributes greatly to almost every aspect of our daily life. Hence, people get the chance
to enjoy these results, which make our lives more relaxed and pleasurable. If we think about it, there
are numerous benefits of science and technology. They range from the little things to the big ones. For
instance, the morning paper which we read that delivers us reliable information is a result of
scientific progress. In addition, the electrical devices without which life is hard to imagine like a
refrigerator, AC, microwave and more are a result of technological advancement.
</p>
</section>
<footer>All rights reserved 2021</footer>
</body>
</html>
I don't know if this solution is neat enough, but you can fix it by adjusting its line-height.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: rgb(236, 195, 141);
}
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
li {
margin: 15px 10px;
font-size: 20px;
}
section {
background-color: rgb(194, 175, 212);
padding: 10px 20px;
}
h1 {
margin: 10px 0;
font-size: 30px;
}
p {
text-align: justify;
padding-right: 50px;
}
p::first-letter {
font-size: 55px;
padding-left: 30px;
line-height: 0.8;
}
footer {
background-color: rgb(236, 195, 141);
height: 30px;
text-align: center;
line-height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="main">
<h1>What you know about Technology?</h1>
<p class="para">Technology is the important part of our day to day life. We get up in the morning from the
ringing of our alarm clocks and go to bed at night after switching our lights off. All these luxuries
that we are able to afford are a resultant of science and technology. Most importantly, how we can do
all this in a short time are because of the advancement of science and technology only. It is hard to
imagine our life now without science and technology. Indeed our existence itself depends on it now.
Every day new technologies are coming up which are making human life easier and more comfortable. Thus,
we live in an era of science and technology.
Essentially, Science and Technology have introduced us to the establishment of modern civilization. This
development contributes greatly to almost every aspect of our daily life. Hence, people get the chance
to enjoy these results, which make our lives more relaxed and pleasurable. If we think about it, there
are numerous benefits of science and technology. They range from the little things to the big ones. For
instance, the morning paper which we read that delivers us reliable information is a result of
scientific progress. In addition, the electrical devices without which life is hard to imagine like a
refrigerator, AC, microwave and more are a result of technological advancement.
</p>
</section>
<footer>All rights reserved 2021</footer>
</body>
</html>
This question already has answers here:
How can I get rid of margin around my HTML content?
(5 answers)
How can I remove space (margin) above HTML header?
(8 answers)
Remove padding beneath heading tag
(6 answers)
Closed 3 years ago.
I am trying to remove the spacing around the teal box in the header. I want the bottom line to match up with the bottom of the teal box. Here is a picture of what I am trying to achieve what my goal is, followed by my code:
.
#wrap {
margin: 0 auto;
width: 960px;
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
#firstName {
color: white;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
}
hr {
margin: 0, 0, 0, 0;
clear: both;
}
img {
width: 200px;
height: 200px;
}
#aboutMe {
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>
<div id="wrap">
<header>
<h1 id="firstName">
Rob Connolly
</h1>
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<hr>
<body>
<div id="aboutMe">
<h2>
About Me
</h2>
<img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">
<p>
Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
in 72 hours. Check out the pictures HERE.
</p>
<p>
Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
my code help your business scale.
</p>
<p>
If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
</p>
</div>
<p>
Copyright ©
</p>
</body>
</html>
First, you should move your <header> to inside your <body>. Second, you can remove the margin for #firstName by adding margin: 0 to the selector:
#firstName {
margin: 0;
}
Then, you can use Flexbox on #menu to center your menu vertically:
#menu {
/* Adds Flexbox to element */
display: flex;
/* Aligns the menu's children horizontally, putting equal
spacing between each child */
justify-content: space-between;
/* Aligns the menu's children vertically */
align-items: center;
}
#wrap {
margin: 0 auto;
width: 960px;
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
#firstName {
/* Remove margin from the div */
margin: 0;
color: white;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
/* Add Flexbox to your menu*/
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
margin: 0, 0, 0, 0;
clear: both;
}
img {
width: 200px;
height: 200px;
}
#aboutMe {
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>
<body>
<div id="wrap">
<header>
<h1 id="firstName">Rob Connolly</h1>
<div id="menu">
<span>About </span>
<span>Portfolio </span>
<span>
Contact
</span>
</div>
</header>
</div>
<hr>
<div id="aboutMe">
<h2>
About Me
</h2>
<img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">
<p>
Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
in 72 hours. Check out the pictures HERE.
</p>
<p>
Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
my code help your business scale.
</p>
<p>
If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
</p>
</div>
<p>
Copyright ©
</p>
</body>
</html>
I have watched tutorials and checked on this site but no matter what I do I
can't get my page to be responsive for mobile. I want the image on top and
the text in a nice paragraph below. I am new to html and css, I don't know
any others. The code I'm adding is the original before I tried to make it
responsive.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="merchandise.css"
</head>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
</style>
<body>
<img src="british-shorthair-3055340_1920.jpg" width:"400" height="400"
class="float-img">
<style>
p {margin-left: 250px; margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
</style>
<font size="5" color="#00b8e6" font-align: center >
<p>
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time
playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.
</p>
</text>
</body>
</head>
</html>
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color:#ffb6c1;
color:#ffffff
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav > li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav> li > a {
text-decoration: none;
color: #ffffff
}
.nav > li > a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner > .bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav{
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right}
p {
padding-top: 25px;
text-align: left;
}
Fixing your HTML first!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="merchandise.css">
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
p {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
#media (max-width: 1024px) {
body img {
max-width: 100px;
height: 100px;
}
body div img {
max-width: 50px;
height: 50px;
}
}
</style>
</head>
<body>
<div class="header">
<img class="banner-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width="1365px" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width:"400" height="400">
<div class="float-img">
<p>Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.</p>
</div>
</body>
</html>
Now for the right solution without framework use #media Queries. Do your homework here .
Now for you the easy Solution to get this responsive is looking into using an HTML framework ,such as the famous Bootstrap, which you wil have to learn allot to fully understand the power behind it but Bootstrap has good documentation to get you going.
You're gonna have to fix your code (html stuff) first and then learn to use media queries.
With media queries, you can target different devices and write specific css that applies to only those devices.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
DO NOT LEARN A FRAMEWORK JUST YET
You should build your knowledge of HTML and CSS first and have a firm understanding of both of them before learning any framework. This will insure that when you learn any framework, you'll be able to make the framework work the way you want.. If you start relying on a framework just yet, you will work according to the framework
Like a previous answer
You're gonna have to fix your code (html stuff) first
But, if for now you don't want to invest a lot of time learning about media queries or code a few rules in CSS, I'd suggest you use a framework and skip the design part, while still making your page look minimally presentable with a tidy look.
I recommend you give a look at Tacit CSS framework. It's ideal for people with zero CSS and design skills and it doesn't involve creating CSS rules from the ground up, you just worry about your HTML code and you need to include Tacit's CSS file.
In order for an image to be considered as a solid object in css it must have the "display: block;" attribute. You might need to also set the same style property to the text paragraph.
Try the following:
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
display: block;
}
Explanation:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display
Take a look at bootstrap http://getbootstrap.com/ it is html/css framework for making responsive websites. Check out how to make a grid layout.
You can dig into media queries yourself but that is not exactly needed if you use a framework https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use a CSS framework. I will recommend bootstrap CSS framework. It will handle all of that for you. UIkit and Foundation are good alternatives too.
I'm having trouble getting the background images to flow to the bottom of the site within my sidebars. What am I doing wrong? Also the content in the center of the page has decided to bunch up and I'm not sure how to fix that either...
How do I get it all to be an even three column layout?
https://jsfiddle.net/ofusmgbn/
Here is the css and html
h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 75px;
padding-top: 25px;
padding-left: 150px;}
h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;}
p{
border-bottom: 1px solid black;
padding-bottom: 4em;
height: 80px;}
img{
float: left;
margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}
ul li {
display: inline-block;
}
ul li a:link{
text-decoration: none;
color: black;}
*{
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.sidebar1{
float: left;
width: 265px;
padding: 0 20px 0 20px;
background: url(sidebar1background.jpg);
background-repeat: repeat-y;
}
.main{
float: left;
width: 60%;
padding: 0 20px 0 20px;
background-color: #d4ff80;
}
.sidebar2{
float: right;
width: 265px;
padding-right: 30px;
padding: 0 10px 0 20px;
background: url(sidebar2background.jpg)right top;
background-repeat: repeat-y;
}
#footer{
clear: both;
height: 50px;
padding-top: 15px;
background-color: black;
color: white;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SylviaGunter WEB-210 Project 6</title>
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Gochi+Hand|Peralta' rel='stylesheet' type='text/css'>
<link rel="stylesheet"
href=01%20-%20Large%20CSS.css>
<link rel="stylesheet" type="text/css" href="02 - Medium CSS">
<link rel="stylesheet" type="text/css" href="03 - Small CSS">
<link rel="stylesheet" type="text/css" href="04 - Print CSS">
<link rel="stylesheet" type="text/css" href="05 - IE">
</head>
<body>
<div class="wrapper">
<div id="masthead">
<h1>Best TV Ever</h1>
</div>
[insert menu toggle here]
[insert menu checkbox here]
<ul>
<li>50s</li>
<li>60s</li>
<li>70s</li>
<li>80s</li>
<li>90s</li>
</ul>
<aside class="sidebar1">
Best Prime Time Shows
<ul>
<li>Alice</li>
<li>All In The Family</li>
<li>Barney Miller</li>
<li>Beverly Hillbillies</li>
<li>Bewitched</li>
<li>The Bob Newhart Show</li>
<li>The Brady Bunch</li>
<li>Gilligan's Island</li>
<li>Good Times</li>
<li>The Love Boat</li>
<li>Mary Tyler Moore</li>
<li>M*A*S*H</li>
<li>Maude</li>
<li>One Day At A Time</li>
<li>Petticoat Junction</li>
<li>Soap</li>
<li>Taxi</li>
<li>What's Happening</li>
<li>Welcome Back Kotter</li>
<li>WKRP In Cincinatti</li>
</ul>
</aside>
<article class="main">
<h2>The Genius of Krofft</h2>
<h3>H.R. Pufnstuff</h3>
<p> <img src="hrpufnstuff.jpg" alt="hrpufnstuff" height="150" width="200">H.R. Pufnstuf centered on a shipwrecked boy named Jimmy. He and his friend, a talking flute named Freddy, take a ride on a mysterious boat, which promised adventures across the sea, to Living Island. The Mayor of Living Island was a friendly and helpful dragon named H.R. Pufnstuf. The boat was actually owned and controlled by a wicked witch named Wilhelmina W. Witchiepoo who rode on a broomstick-like vehicle called the Vroom Broom. She used the boat to lure Jimmy and Freddy to her castle on Living Island, where she was going to take Jimmy prisoner and steal Freddy. But Pufnstuf found out about her plot and was able to rescue Jimmy when he leaped out of the enchanted boat with Freddy and swam ashore.</p>
<h3>Lidsville</h3>
<p><img src="lidsville.jpg" alt="lidsville" height="150" width="200">
The show involved a teenage boy named Mark who fell into the hat of Merlo the Magician and arrived in Lidsville, a land of living hats. The hats on the show are depicted as having the same characteristics as the humans who would normally wear them.</p>
<h3>The Bugaloos</h3>
<p><img src="bugaloos.jpg" alt="bugaloos" height="150" width="200">The Bugaloos featured a musical group composed of four British-accented teenagers, who lived in fictional Tranquility Forest. They wore insect-themed outfits with antennae and wings which allowed them to fly. They were constantly beset by the evil machinations of Benita Bizarre, played by comedienne Martha Raye.</p>
<h3>Land of the Lost</h3>
<p><img src="landlost.jpg" alt="landlost" height="150" width="200">Land of the Lost details the adventures of the Marshall family (father Rick and his teenage children Will and Holly) who are trapped in an alternate universe inhabited by dinosaurs, a primate-type people called Pakuni, and aggressive humanoid/lizard creatures called Sleestak.</p>
<h3>Sigmund the Sea Monster</h3>
<p><img src="sigmund.jpg" alt="sigmund" height="150" width="200">The show centered on two brothers, Johnny and Scott Stuart, who discover Sigmund, a friendly young sea monster who had been thrown out by his comically dysfunctional undersea family for refusing to frighten people. The boys hide Sigmund in their clubhouse.</p>
</article>
<aside class="sidebar2">
Best Superhero Shows
<ul>
<li>Batman (1966)</li>
<li>The Bionic Woman (1976)</li>
<li>Electra Woman and Dyna Girl (1976)</li>
<li>The Greatest American Hero (1981)</li>
<li>The Incredible Hulk (1977)</li>
<li>Isis (1975)</li>
<li>Shazam! (1974)</li>
<li>The Six Million Dollar Man (1974)</li>
<li>Wonder Woman (1976)</li>
</ul>
</aside>
<div id="footer">
Stop watching TV and write some code!
</div>
</body>
</html>
The problem with your sidebars is that they have no height so they're just stretching to fir the content inside. If you want them to be a certain height, you'll need to define it.
Also, your content is bunched because the height set for the <p> tags is not enough. Just remove that altogether and make the tags display:block.