I am trying to put a blue bar on the left side of my page. It should take up the full height from top to bottom of the page. It will not necessarily have content, however.
On the advice of another member I've edited this to contain all my HTML and CSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>anonymized</title>
</head>
<body>
<div class = "wrapper">
<div class = "sideBar">
<p class = "sideBarText">We are anonymized. We are here to provide top-quality service for all our clients, no matter their needs.</p>
</div>
<div class = "headerImage">
<pre class = "logoLink">anonymized</pre>
</div>
<div class = "globalNav">
<ul>
<li class = "globalNavItem">About Us</li>
<li class = "globalNavItem">Services</li>
<li class = "globalNavItem">Testimonials</li>
<li class = "globalNavItem">Contact</li>
</ul>
</div>
<p>The 1881 world tour of King Kalākaua of the Kingdom of Hawaii was his attempt to save the Hawaiian culture and population from extinction through the importation of a labor force from Asia-Pacific nations. His efforts brought the small island nation to the attention of world leaders, but sparked rumors that the kingdom was for sale. In Hawaii there were critics who believed the labor negotiations were just his excuse to see the world. The 281-day trip gave him the distinction of being the first monarch to circumnavigate the globe, just as his 1874 travels had made him the first reigning monarch to visit America and the first honoree of a state dinner at the White House.
Kalākaua met with heads of state in Asia, the Mideast and Europe, to encourage an influx of sugar plantation labor in family groups, as well as unmarried women as potential brides for Hawaii's existing contract laborers. While in Asia, he tried to forestall American ambitions by offering a plan to Emperor Meiji for putting Hawaii under the protection of the Empire of Japan with an arranged marriage between his niece Kaiulani and a Japanese prince. On his visit to Portugal, he negotiated a treaty of friendship and commerce with Hawaii that would provide a legal framework for the emigration of Portuguese laborers to Hawaii. The King had an audience in Rome with Pope Leo XIII and met with many of the crowned heads of Europe. Britain's Queen Victoria and the splendor of her royal life impressed him more than any other monarchy; having been greatly affected by the ornate trappings of European sovereigns, he would soon have Hawaii's monarchy mirror that grandeur.
The King traveled with no security guards; only a small group of personal friends made the journey with him. Except for land transportation in cities, and two loaned ships in China and the US, his modes of transportation were seldom reserved exclusively for him. He shared regularly scheduled steamships and rail transport with fare-paying passengers. On the Red Sea, he played cards and danced with other passengers. Like other tourists, he visited the white elephants of Siam, the Giza pyramid complex in Egypt, tourist sites in India, and museums in Europe. Along the way, he exceeded his original budget, went shopping anyway, and sent letters back home.
President James A. Garfield died four days before they arrived back in the United States, and Kalākaua paid a courtesy call to newly inaugurated President Chester A. Arthur at the White House in Washington, D.C. There were no public or private appearances for the King in New York, only a day at Coney Island. Before leaving the eastern US, the King met with Thomas Edison to have a demonstration of electric lights, and visited Virginia's Fort Monroe. He toured Hampton Normal and Agricultural School, and shopped for horses in Kentucky. The royal party boarded a train to California, where they were house guests of Claus Spreckels at his estate in Aptos (near Santa Cruz), and had a few days of seeing the sights in the area before sailing back to Hawaii. Kalākaua was successful in jump-starting new immigration, with the first transplants arriving in Hawaii less than a year later. In the years that followed, he began emulating the lifestyles of European royalty with expensive furnishings in Iolani Palace, a public coronation of himself, and a two-week public celebration of his birthday.</p>
</div>
</body>
</html>
And the full CSS:
* {
margin: 0;
padding: 0;
}
html, body{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
height: 100%;
min-height: 100%;
}
.wrapper {
width: 75%;
height: 100%;
margin: auto;
border: 1px solid black;
}
.headerImage {
width: 80%;
height: 15em;
background-image: url("skyline.jpg");
margin: auto;
background-size: 100% 400px;
background-repeat: no-repeat;
box-sizing: border-box;
}
.globalNav {
margin: auto;
background-color: blue;
width: 80%;
text-align: center;
top: 0;
}
.globalNavItem {
display: inline-block;
color: white;
font-size: 1.0em;
padding: 0.5em 6%;
margin: 0;
}
.sideBar {
width: 10%;
min-height: 100%;
background-color: blue;
float: left;
margin: 0;
box-sizing: border-box;
}
p {
font-size: 72px;
text-align: justify;
}
.sideBarText {
width: 100%;
font-size: 12pt;
color: white;
display: inline-block;
margin: 0;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
Here is a JSFiddle of the whole thing: https://jsfiddle.net/d7vdkp4c/
As you can see, what I have right now does indeed cause the div to take up 100% of the height - of what's visible. The wrapper div collapses to be equal to what I believe is known as the "viewport height" (I am new to web development; trying to teach myself). This means that if I scroll down, the bar does not continue.
I've been researching this a ton on Google, and many of the answers I've read have been here on StackOverflow, but none of them seem to account for this problem - making that 100% height stretch all the way to the bottom of the entire webpage, not just the visible screen.
Any help with this is greatly appreciated. While I will be very grateful for any answer, I would, since I am new to this, really appreciate it if any solutions could be kept simple - or if that is not possible, that they could be either explained in detail, or some external resource included which will explain in detail. I want to learn!
Thank you!
Since .wrapper wraps all of your content, add position: relative; padding-left: 10%, then position the .sidebar with position: absolute; top: 0; bottom: 0; left: 0; width: 10%; so it will stretch from the top to bottom of .wrapper
* {
margin: 0;
padding: 0;
}
html,
body {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
}
.wrapper {
width: 75%;
margin: auto;
border: 1px solid black;
position: relative;
padding-left: 10%;
box-sizing: border-box;
}
.logoLink {
font-family: 'Russo One', sans-serif;
color: white;
font-size: 2.5em;
}
.headerImage {
width: 80%;
height: 15em;
background-image: url("skyline.jpg");
margin: auto;
background-size: 100% 400px;
background-repeat: no-repeat;
box-sizing: border-box;
}
.globalNav {
margin: auto;
background-color: blue;
width: 80%;
text-align: center;
top: 0;
}
.globalNavItem {
display: inline-block;
color: white;
font-size: 1.0em;
padding: 0.5em 6%;
margin: 0;
}
.sideBar {
width: 10%;
background-color: blue;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: 0;
box-sizing: border-box;
}
/*Everything relating to pageNav is currently
irrelevant as pageNav is commented out in the
HTML*/
.pageNav {
display: inline-block;
border-width: 7px;
border-style: ridge;
float: left;
width: 6%;
text-align: center;
background-color: lightgray;
margin: 0.1em 0.7em 0.3em 0;
min-width: 5.3em;
}
.pageNavHeader {
font-weight: bold;
}
.pageNavItem {
border-width: 2px 0 0 0;
border-color: black;
border-style: solid;
}
p {
font-size: 72px;
text-align: justify;
}
.sideBarText {
width: 100%;
font-size: 12pt;
color: white;
display: inline-block;
margin: 0;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<title>anonymized</title>
<body>
<div class="wrapper">
<div class="sideBar">
<p class="sideBarText">We are anonymized. We are here to provide top-quality service for all our clients, no matter their needs.</p>
</div>
<div class="headerImage">
<pre class="logoLink">anonymized</pre>
</div>
<div class="globalNav">
<ul>
<li class="globalNavItem">About Us</li>
<li class="globalNavItem">Services</li>
<li class="globalNavItem">Testimonials</li>
<li class="globalNavItem">Contact</li>
</ul>
</div>
<!-- <div class = "pageNav">
<ul style = "list-style: none;">
<li class = "pageNavHeader">Home</li>
<li class = "pageNavItem">Test1</li>
<li class = "pageNavItem">Test2</li>
<li class = "pageNavItem">Test3</li>
<li class = "pageNavItem">Test4</li>
<li class = "pageNavItem">Test5</li>
<li class = "pageNavItem">Test6</li>
</ul>
</div> -->
<p>The 1881 world tour of King Kalākaua of the Kingdom of Hawaii was his attempt to save the Hawaiian culture and population from extinction through the importation of a labor force from Asia-Pacific nations. His efforts brought the small island nation
to the attention of world leaders, but sparked rumors that the kingdom was for sale. In Hawaii there were critics who believed the labor negotiations were just his excuse to see the world. The 281-day trip gave him the distinction of being the first
monarch to circumnavigate the globe, just as his 1874 travels had made him the first reigning monarch to visit America and the first honoree of a state dinner at the White House. Kalākaua met with heads of state in Asia, the Mideast and Europe,
to encourage an influx of sugar plantation labor in family groups, as well as unmarried women as potential brides for Hawaii's existing contract laborers. While in Asia, he tried to forestall American ambitions by offering a plan to Emperor Meiji
for putting Hawaii under the protection of the Empire of Japan with an arranged marriage between his niece Kaiulani and a Japanese prince. On his visit to Portugal, he negotiated a treaty of friendship and commerce with Hawaii that would provide
a legal framework for the emigration of Portuguese laborers to Hawaii. The King had an audience in Rome with Pope Leo XIII and met with many of the crowned heads of Europe. Britain's Queen Victoria and the splendor of her royal life impressed him
more than any other monarchy; having been greatly affected by the ornate trappings of European sovereigns, he would soon have Hawaii's monarchy mirror that grandeur. The King traveled with no security guards; only a small group of personal friends
made the journey with him. Except for land transportation in cities, and two loaned ships in China and the US, his modes of transportation were seldom reserved exclusively for him. He shared regularly scheduled steamships and rail transport with
fare-paying passengers. On the Red Sea, he played cards and danced with other passengers. Like other tourists, he visited the white elephants of Siam, the Giza pyramid complex in Egypt, tourist sites in India, and museums in Europe. Along the way,
he exceeded his original budget, went shopping anyway, and sent letters back home. President James A. Garfield died four days before they arrived back in the United States, and Kalākaua paid a courtesy call to newly inaugurated President Chester
A. Arthur at the White House in Washington, D.C. There were no public or private appearances for the King in New York, only a day at Coney Island. Before leaving the eastern US, the King met with Thomas Edison to have a demonstration of electric
lights, and visited Virginia's Fort Monroe. He toured Hampton Normal and Agricultural School, and shopped for horses in Kentucky. The royal party boarded a train to California, where they were house guests of Claus Spreckels at his estate in Aptos
(near Santa Cruz), and had a few days of seeing the sights in the area before sailing back to Hawaii. Kalākaua was successful in jump-starting new immigration, with the first transplants arriving in Hawaii less than a year later. In the years that
followed, he began emulating the lifestyles of European royalty with expensive furnishings in Iolani Palace, a public coronation of himself, and a two-week public celebration of his birthday.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="globalNavScrollLock.js"></script>
</body>
Related
Here is the link to the codepen. I notice that the HTML doesn't have a HTML section or body section but the CSS refers to HTML and body? What does that mean? I am just starting to learn, so sorry if this question is too basic. Any help is appreciated.
CodePen Example
HTML Below: CSS To follow after the html
html {
/* Setting a base font size of 10px give us easier rem calculations
Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth
*/
font-size: 10px;
}
body {
/* Native font stack https://getbootstrap.com/docs/4.2/content/reboot/#native-font-stack */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Helvetica Neue', Arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
color: #333;
margin: 0;
}
h1 {
font-size: 4rem;
margin-bottom: 0;
}
#media (max-width: 460px) {
h1 {
font-size: 3.5rem;
line-height: 1.2;
}
}
h2 {
font-size: 3.25rem;
}
a {
color: #477ca7;
}
a:visited {
color: #74638f;
}
#main {
margin: 30px 8px;
padding: 15px;
border-radius: 5px;
background: #eee;
}
#media (max-width: 460px) {
#main {
margin: 0;
}
}
img {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
}
#img-div {
background: white;
padding: 10px;
margin: 0;
}
#img-caption {
margin: 15px 0 5px 0;
}
#media (max-width: 460px) {
#img-caption {
font-size: 1.4rem;
}
}
#headline {
margin: 50px 0;
text-align: center;
}
ul {
max-width: 550px;
margin: 0 auto 50px auto;
text-align: left;
line-height: 1.6;
}
li {
margin: 16px 0;
}
blockquote {
font-style: italic;
max-width: 545px;
margin: 0 auto 50px auto;
text-align: left;
}
<main id="main">
<h1 id="title">Dr. Norman Borlaug</h1>
<p>The man who saved a billion lives</p>
<figure id="img-div">
<img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"
alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists" />
<figcaption id="img-caption">
Dr. Norman Borlaug, third from the left, trains biologists in Mexico on
how to increase wheat yields - part of his life-long war on hunger.
</figcaption>
</figure>
<section id="tribute-info">
<h3 id="headline">Here's a time line of Dr. Borlaug's life:</h3>
<ul>
<li><strong>1914</strong> - Born in Cresco, Iowa</li>
<li>
<strong>1933</strong> - Leaves his family's farm to attend the
University of Minnesota, thanks to a Depression era program known as the
"National Youth Administration"
</li>
<li>
<strong>1935</strong> - Has to stop school and save up more money. Works
in the Civilian Conservation Corps, helping starving Americans. "I saw
how food changed them", he said. "All of this left scars on me."
</li>
<li>
<strong>1937</strong> - Finishes university and takes a job in the US
Forestry Service
</li>
<li>
<strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets
laid off due to budget cuts. Inspired by Elvin Charles Stakman, he
returns to school study under Stakman, who teaches him about breeding
pest-resistent plants.
</li>
<li>
<strong>1941</strong> - Tries to enroll in the military after the Pearl
Harbor attack, but is rejected. Instead, the military asked his lab to
work on waterproof glue, DDT to control malaria, disinfectants, and
other applied science.
</li>
<li>
<strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology
</li>
<li>
<strong>1944</strong> - Rejects a 100% salary increase from Dupont,
leaves behind his pregnant wife, and flies to Mexico to head a new plant
pathology program. Over the next 16 years, his team breeds 6,000
different strains of disease resistent wheat - including different
varieties for each major climate on Earth.
</li>
<li>
<strong>1945</strong> - Discovers a way to grown wheat twice each
season, doubling wheat yields
</li>
<li>
<strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat
with a high-yeidling American breed, creating a strain that responds
well to fertilizer. It goes on to provide 95% of Mexico's wheat.
</li>
<li>
<strong>1962</strong> - Visits Delhi and brings his high-yielding
strains of wheat to the Indian subcontinent in time to help mitigate
mass starvation due to a rapidly expanding population
</li>
<li><strong>1970</strong> - receives the Nobel Peace Prize</li>
<li>
<strong>1983</strong> - helps seven African countries dramatically
increase their maize and sorghum yields
</li>
<li>
<strong>1984</strong> - becomes a distinguished professor at Texas A&M
University
</li>
<li>
<strong>2005</strong> - states "we will have to double the world food
supply by 2050." Argues that genetically modified crops are the only way
we can meet the demand, as we run out of arable land. Says that GM crops
are not inherently dangerous because "we've been genetically modifying
plants and animals for a long time. Long before we called it science,
people were selecting the best breeds."
</li>
<li><strong>2009</strong> - dies at the age of 95.</li>
</ul>
<blockquote
cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm">
<p>
"Borlaug's life and achievement are testimony to the far-reaching
contribution that one man's towering intellect, persistence and
scientific vision can make to human peace and progress."
</p>
<cite>-- Indian Prime Minister Manmohan Singh</cite>
</blockquote>
<h3>
If you have time, you should read more about this incredible human being
on his
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia
entry</a>.
</h3>
</section>
</main>
Codepen automatically injects:
<!DOCTYPE html>
<html lang="en">
<body>
<!--Your codepen code goes here -->
</body>
</html>
Everything you type in a codepen editor is within the <body></body> - However, you can still reference these elements in your css.
`
* {
box-sizing: border-box;
}
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
.container{
max-width: 1368px;
margin:auto;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
}
header {
background: #55d6aa;
flex: 0 0 100%;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
#sidebar {
flex: 0 0 25%;
max-width: 250px;
background-color: #DDD;
list-style-type: none;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.p{
margin: 100px;
}
<header>
<div class="container">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<div id="sidebar">
<ul>
<li> Star wars movie review</li>
<li>E.T movie review</li>
<li>Happy Death Day Movie review</li>
<li>Thor ragnorok movie review</li>
</ul>
</div>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
`So Ive tried using a border to keep it all in a box, but it still seems to stretch out when I zoom out, I then tried using word-wrap: break-word; which at first worked but after adding a sidebar it doesn't anymore. Here's a photo describing the problem: a stretched out article
(also, if you can help, how do I split my sidebar into different grids for each listing on my sidebar? I want to make it look like this:sidebar)
Help is aprecciated, thank you!!
Wrap your review text (all the p tags that follows thumbnail) in a div with some class i.e class="review-text".
And create a css rule as following:
.review-text {
min-width:600px;
max-width:50%;
margin:0 auto;
}
here is a working example:
https://codepen.io/fullstackpal/pen/yLYJmbv
Did you try wrapping it all in a div and applying the CSS max-width styling to it? That should contain the text within a certain area.
Something like the following.
HTML:
<div class="text-wrapper">
<p> Your text here... </p>
</div>
CSS:
.text-wrapper {
max-width: 800px;
margin: auto;
}
The margin: auto should centre the text.
I have tried searching tutorials online however, they seem to be too hard to understand, I have tried using flex to create a sidebar for my webpage, however that seems to have made the text from the main article overflow. This is what I am expecting my sidebar to look like A sidebar on the left hand side of the article that stays in the middle along with my article when I zoom out.
Here is my code:
*{
box-sizing:border-box;
}
#font-face{
src:url(fonts/WaywardSans-Regular.otf);
font-family:wayward;
}
body {
margin:0;
background: #fff;
font-family:wayward;
font-weight:100;
height: 100%
overflow-x: hidden;
overflow-y: scroll;
}
}.container {
width: 80%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left:30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1{
margin:10px;
}
}
.thumbnail{
position: static;
left:900px;
border:2px hidden;
padding:4px;
margin:5px;
}
.review {
width:700px;
position:static;
line-height:29.25px;
padding-top:5px;
text-align: center;
border-width:1px;
margin:10px;
padding:5px;
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<title>Once Upon A Time</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</div>
</header>
<div class = "review">
<h1>Titanic Movie Review 1996</h1>
<h3> -By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<p>The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose.
And heres a random movie review from somewhere: <br>
<br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.
<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</body>
</html>
Here is your snippet. You can check and let me know if you face any problems.
* {
box-sizing: border-box;
}
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
}
header {
background: #55d6aa;
flex: 0 0 100%;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
#sidebar {
flex: 0 0 25%;
max-width: 250px;
background-color: #DDD;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
<header>
<div class="container">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<div id="sidebar">
sidebar content comes here
</div>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
am building a tribute page from freeCodeCamp and I am trying to style my main content background with a specific color (#ECEAEA). However, the background color is not covering all the main content area as desired.
I have mocked up the tribute page but the background color is not wrapping all content. See the code section.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
line-height: 2rem;
/*background-color:white; */
}
/* Global Styles */
#main {
background-color: #ECEAEA;
width: 98%;
margin: 25px auto;
border-radius: 5px;
/*position: relative;
box-sizing: border-box; */
background-size: cover;
min-height: 100%;
}
#title, #main-para {
text-align: center;
margin: 20px auto;
position: relative;
top: 70px;
}
#img-div {
width: 96%;
background-color:white;
margin: 0 auto;
border: 1px solid red;
position: relative;
top: 60px;
padding: 10px;
border-radius: 5px;
}
figure, figcaption {
text-align: center;
padding-top: 10px;
}
#tribute-info {
/*border: 1px solid green; */
display: flex;
flex-flow: column wrap;
position: relative;
top: 120px;
align-items: center;
width: 60%;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid green;
}
#cite-para {
line-height: 1.5em;
text-align: left;
}
blockquote {
font-style: italic;
}
#link-target {
font-size: 1.17em;
}
<!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>FCC: Tribute Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="main">
<h1 id="title">Dr Norman Bourlaug</h1>
<p id="main-para">The man who saved a billion lives</p>
<div id="img-div">
<figure>
<img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" id="image"
alt="Dr Norman Borlaug seen standing in Mexican wheat field with a group of biologists">
<figcaption id="img-caption">Dr. Norman Bourlaug, third from the left, trains biologists in Mexico on
how to
increase wheat yield - part of his life-long war on hunger.
</figcaption>
</figure>
</div>
<section id="tribute-info">
<h3>Here's a time line of Dr.Borlaug's life</h3>
<ul id="history">
<li>
<strong>1914</strong> - Born in Cresco Iowa
</li>
<li>
<strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a
Depression era program known as the "National Youth Administration"
</li>
<li>
<strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian
Conservation Corps, helping starving Americans. "I saw how food changed them", he said.
"All of this
left scars on me."
</li>
<li>
<strong>1937</strong> - Finishes university and takes a job in the US Forestry Service
</li>
<li>
<strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts.
Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about
breeding pest-resistent plants.
</li>
<li>
<strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is
rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria,
disinfectants, and other applied science.
</li>
<li>
<strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology
</li>
<li>
<strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his
pregnant wife,
and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds
6,000 different strains of disease resistent wheat - including different varieties for each major
climate on Earth.
</li>
<li>
<strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields
</li>
<li>
<strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American
breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of
Mexico's
wheat.
</li>
<li>
<strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian
subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
</li>
<li>
<strong>1970</strong> - receives the Nobel Peace Prize
</li>
<li>
<strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum
yields
</li>
<li>
<strong>1984</strong> - becomes a distinguished professor at Texas A&M University
</li>
<li>
<strong>2005</strong> - states "we will have to double the world food supply by 2050."
Argues that genetically modified crops are the only way we can meet the demand, as we run out of
arable land. Says that GM crops are not inherently dangerous because "we've been genetically
modifying plants and animals for a long time. Long before we called it science, people were
selecting the best breeds."
</li>
<li>
<strong>2009</strong> - dies at the age of 95.
</li>
</ul>
<blockquote
cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm">
<p id="cite-para">
"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's
towering intellect, persistence and scientific vision can make to human peace and progress."
</p>
<cite>-- Indian Prime Minister Manmohan Singh</cite>
</blockquote>
</section>
<h3 id="link-target">If you have time, you should read more about this incredible human being on his <a
href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank" id="tribute-link">
Wikipedia entry</a></h3>
</main>
</body>
</html>
I expect the main content background color to cover the entire content.enter image description here
You need to delete top property for your #tribute-info selector and add margin-top with top property value instead, like:
#tribute-info {
display: flex;
flex-flow: column wrap;
position: relative;
align-items: center;
width: 60%;
margin: 120px auto 0;
box-sizing: border-box;
border: 1px solid green;
}
You should remove the "top" property from #tribute-info since it pushes the section out from the main...
Working snippet:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
line-height: 2rem;
/*background-color:white; */
}
/* Global Styles */
#main {
background-color: #ECEAEA;
width: 98%;
margin: 25px auto;
border-radius: 5px;
/*position: relative;
box-sizing: border-box; */
background-size: cover;
min-height: 100%;
}
#title, #main-para {
text-align: center;
margin: 20px auto;
position: relative;
top: 70px;
}
#img-div {
width: 96%;
background-color:white;
margin: 0 auto;
border: 1px solid red;
position: relative;
top: 60px;
padding: 10px;
border-radius: 5px;
}
figure, figcaption {
text-align: center;
padding-top: 10px;
}
#tribute-info {
/*border: 1px solid green; */
display: flex;
flex-flow: column wrap;
position: relative;
/* top: 120px;*/
align-items: center;
width: 60%;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid green;
}
#cite-para {
line-height: 1.5em;
text-align: left;
}
blockquote {
font-style: italic;
}
#link-target {
font-size: 1.17em;
}
<main id="main">
<h1 id="title">Dr Norman Bourlaug</h1>
<p id="main-para">The man who saved a billion lives</p>
<div id="img-div">
<figure>
<img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" id="image"
alt="Dr Norman Borlaug seen standing in Mexican wheat field with a group of biologists">
<figcaption id="img-caption">Dr. Norman Bourlaug, third from the left, trains biologists in Mexico on
how to
increase wheat yield - part of his life-long war on hunger.
</figcaption>
</figure>
</div>
<section id="tribute-info">
<h3>Here's a time line of Dr.Borlaug's life</h3>
<ul id="history">
<li>
<strong>1914</strong> - Born in Cresco Iowa
</li>
<li>
<strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a
Depression era program known as the "National Youth Administration"
</li>
<li>
<strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian
Conservation Corps, helping starving Americans. "I saw how food changed them", he said.
"All of this
left scars on me."
</li>
<li>
<strong>1937</strong> - Finishes university and takes a job in the US Forestry Service
</li>
<li>
<strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts.
Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about
breeding pest-resistent plants.
</li>
<li>
<strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is
rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria,
disinfectants, and other applied science.
</li>
<li>
<strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology
</li>
<li>
<strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his
pregnant wife,
and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds
6,000 different strains of disease resistent wheat - including different varieties for each major
climate on Earth.
</li>
<li>
<strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields
</li>
<li>
<strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American
breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of
Mexico's
wheat.
</li>
<li>
<strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian
subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
</li>
<li>
<strong>1970</strong> - receives the Nobel Peace Prize
</li>
<li>
<strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum
yields
</li>
<li>
<strong>1984</strong> - becomes a distinguished professor at Texas A&M University
</li>
<li>
<strong>2005</strong> - states "we will have to double the world food supply by 2050."
Argues that genetically modified crops are the only way we can meet the demand, as we run out of
arable land. Says that GM crops are not inherently dangerous because "we've been genetically
modifying plants and animals for a long time. Long before we called it science, people were
selecting the best breeds."
</li>
<li>
<strong>2009</strong> - dies at the age of 95.
</li>
</ul>
<blockquote
cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm">
<p id="cite-para">
"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's
towering intellect, persistence and scientific vision can make to human peace and progress."
</p>
<cite>-- Indian Prime Minister Manmohan Singh</cite>
</blockquote>
</section>
<h3 id="link-target">If you have time, you should read more about this incredible human being on his <a
href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank" id="tribute-link">
Wikipedia entry</a></h3>
</main>
You're setting top property for both your #img-div and #tirbute-info and that pushes the content outside of your main container so you should use margin-top instead, like so:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
line-height: 2rem;
/*background-color:white; */
}
/* Global Styles */
#main {
background-color: #ECEAEA;
width: 98%;
margin: 25px auto;
border-radius: 5px;
/*position: relative;
box-sizing: border-box; */
background-size: cover;
min-height: 100%;
}
#title, #main-para {
text-align: center;
margin: 20px auto;
position: relative;
top: 70px;
}
#img-div {
width: 96%;
background-color:white;
margin: 0 auto;
border: 1px solid red;
position: relative;
margin-top: 100px;
padding: 10px;
border-radius: 5px;
}
figure, figcaption {
text-align: center;
padding-top: 10px;
}
#tribute-info {
display: flex;
flex-flow: column wrap;
position: relative;
margin-top: 120px;
align-items: center;
width: 60%;
margin: 120px auto 100px;
box-sizing: border-box;
border: 1px solid green;
}
#cite-para {
line-height: 1.5em;
text-align: left;
}
blockquote {
font-style: italic;
}
#link-target {
font-size: 1.17em;
}
Also just to point out, you should use classes for your elements and not IDs everywhere. It's best to not use the IDs at all.
I'm doing a project for school where I need to make a website, but I'm having trouble making a horizontal navigation bar. It looks like a square which is a problem. Here's my HTML:
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
}
.header {
background: #444;
}
.sidebar1 {
float: left;
width: 180px;
background: lightblue;
padding-bottom: 10px;
}
.content {
background:#D5D5D5;
width: 780px;
float: left;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid black;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: lightblue;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #851919
}
.footer {
padding: 10px 0;
position: relative;
clear: both;
background:lightblue;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.headertext{
display:inline-block;
float:right;
font-size:100px;
color: white;
margin-right: 70px;
margin-top: 20px;
font-family: "Courier New", Courier, monospace;
}
ul.xyz {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.abc {
float: left;
}
li.abc a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active2 {
background-color: #4CAF50;
}
#headernav{
height:100px;
width: 1800px;
}
<div class="container">
<div class="header">
<div class="headertext">
<p>Peoplepedia</p>
</div>
<img src="../Downloads/man.png" alt="Logo" name="Logo" width="180" height="180" id="Insert_logo" style="background: white; display: block;" />
</div>
<div id="headernav">
<ul class="xyz">
<li class="abc"><a class="active2" href="#home">Home</a></li>
<li class="abc">News</li>
<li class="abc">Contact</li>
<li class="abc">About</li>
</ul>
</div>
<div class="sidebar1">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p> Fun Fact: </p>
<p>Elon Musk was the inspiration for Tony Stark in the Iron Man movies.</p>
</div>
<div class="content">
<h1>Elon Musk</h1>
<p>Born in South Africa in 1971, Elon Musk became a multimillionaire in his late 20s when he sold his start-up company, Zip2, to a division of Compaq Computers. He achieved more success by founding X.com in 1999, SpaceX in 2002 and Tesla Motors in 2003. Musk made headlines in May 2012 when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station.</p>
<h3>Young Elon</h3>
<p>Born and raised in South Africa, Elon Musk purchased his first computer at age 10. He taught himself how to program, and when he was 12 he made his first software sale—of a game he created called Blastar. At age 17, in 1989, he moved to Canada to attend Queen’s University, but he left in 1992 to study business and physics at the University of Pennsylvania. He graduated with an undergraduate degree in economics and stayed for a second bachelor’s degree in physics.</p>
<p>After leaving Penn, Elon Musk headed to Stanford University in California to pursue a Ph.D in energy physics. However, his move was timed perfectly with the Internet boom, and he dropped out of Stanford after just two days to become a part of it, launching his first company, Zip2 Corporation.</p>
<p>An online city guide, Zip2 was soon providing content for the new Web sites of both the New York Times and the Chicago Tribune, and in 1999, a division of Compaq Computer Corporation bought Zip2 for $307 million in cash and $34 million in stock options.</p>
<h3>As an Entreprenuer</h3>
<p>Also in 1999, Musk co-founded X.com, an online financial services/payments company. An X.com acquisition the following year led to the creation of PayPal as it is known today, and in October 2002, PayPal was acquired by eBay for $1.5 billion in stock. Before the sale, Musk owned 11 percent of PayPal stock.</p>
<blockquote tml-render-layout="inline">
<p><em>"If I’m trying to solve a problem, and I think I’ve got some elements of it kind of close to being figured out, I’ll pace for hours trying to think it through."</em></p>
</blockquote>
<p>Never one to rest on his laurels, Musk founded his third company, Space Exploration Technologies Corporation, or SpaceX, in 2002 with the intention of building spacecraft for commercial space travel. By 2008, SpaceX was well established, and NASA awarded the company the contract to handle cargo transport for the International Space Station—with plans for astronaut transport in the future—in a move to replace NASA’s own space shuttle missions.</p>
<p>The boundless potential of space exploration and the preservation of the future of the human race have become the cornerstones of Musk's abiding interests, and toward these he has founded the Musk Foundation, which is dedicated to space exploration and the discovery of renewable and clean energy sources. </p>
<h4>SpaceX</h4>
<p><strong>Space Exploration Technologies Corporation</strong> (<strong>SpaceX</strong>) is an American aerospace manufacturer and space transport services company with its headquarters in Hawthorne, California, USA. It was founded in 2002 by former PayPal entrepreneur and Tesla Motors CEO Elon Muskwith the goal of creating the technologies to reduce space transportation costs and enable the colonization of Mars. It has developed the Falcon 1 and Falcon 9 launch vehicles, both of which were designed from conception to eventually become reusable and the Dragon spacecraft which is flown into orbit by the Falcon 9 launch vehicle to supply the International Space Station (ISS) with cargo. A manned version of Dragon is in development.</p>
<p>SpaceX's achievements include the first privately funded, liquid-propellant rocket(Falcon 1) to reach orbit, in 2008; the first privately funded company to successfully launch, orbit and recover a spacecraft (Dragon), in 2010; and the first private company to send a spacecraft (Dragon) to the ISS, in 2012. The launch of SES-8, in 2013, was the first SpaceX delivery into geosynchronous orbit, while the launch of the Deep Space Climate Observatory (DSCOVR), in 2015, was the company's first delivery beyond Earth orbit. On December 21, 2015, SpaceX successfully returned a first stage booster back to the ground at Cape Canaveral, the first such accomplishment by an orbit-capable rocket.</p>
<p>NASA awarded the company a Commercial Orbital Transport System(COTS) contract in 2006, to design and demonstrate a launch system to resupply cargo to the International Space Station (ISS). SpaceX, as of May 2015 has flown six missions to the ISS under a cargo supply contract. NASA also awarded SpaceX a contract in 2011 to develop and demonstrate a human-rated Dragon as part of its Commercial Crew development (CCDev) program to transport crew to the ISS.</p>
<h3>Tesla Motors</h3>
<p>Another Musk venture is Tesla Motors, a company dedicated to producing affordable, mass-market electric cars. Five years after its formation, the company in 2008 unveiled the Roadster, a sports car capable of accelerating from 0 to 60 mph in 3.7 seconds, as well traveling nearly 250 miles between charges of its lithum ion battery. With a stake in the company taken by Daimler and a strategic partnership with Toyota, Tesla Motors launched its initial public offering in June 2010, raising $226 million.</p>
<p>Additional successes include the Model S, the company's first electric sedan. Capable of covering 265 miles between charges, the Model S was honored as the 2013 Car of the Year by <em>Motor Trend magazine.</em> In 2015, the Model S became the first consumer car with autopilot capabilities.</p>
</div>
</div>
<div class="footer">
<center><p>© 2015 Jones Enterprises</p></center>
</div>
I believe there is a problem with li.abc, ul.xyz, and headernav.
Any help would be appreciated. I am a beginner and have no clue what I am doing.
You may do some changes to cover the problem:
on this <p>
<div class="headertext">
<p>Peopleopedia</p>
</div>
add margin:bottom: 0; style.
on ul#xyz add width: 100%;
and
from <div id="headernav"> remove height: 100px;