Problem: The image I tried floating to the right floats out of the black border around the html/body element and causes it to have half of the image out of view, it looks like it floated bottom right instead of it just floating right
Why is it that the image wont be contained within the body border?
CSS
html {
padding: 0px;
margin: 0px;
background-color: white;
font-family: Verdana, Tahoma, sans-serif;
a:link,
a:visited {
color: hsl(0, 79%, 43%);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
header {
width: 100vw;
}
h1 {
background-color: rgb(134, 0, 0);
position: sticky;
top: 0px;
font-size: 1.2em;
width: 90vw;
padding-top: 10px;
padding-bottom: 10px;
margin-right: auto;
margin-left: auto;
color: white;
padding: 20px
}
.headerNav {
width: 90vw;
margin-left: auto;
margin-right: auto;
padding-bottom: 5px;
text-align: left;
}
ul {
text-decoration-style: dashed;
}
.bodyOfPage {
width: 90vw;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 1px;
border-color: #CCCCC;
border-radius: 10px;
}
h2 {
font-size: 120%;
color: #666666
}
h3 {
color: #9f2424
}
footer {
width: 90vw;
margin-left: auto;
margin-right: auto;
font-size: 80%;
font-style: italic;
color: #666666;
}
a:link,
a:visited {
color: hsl(0, 79%, 43%);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
figure {
float: right;
height: auto;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: rgb(204, 108, 108);
}
figcaption{
font-style: italic;
color: #666666;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href='../week2/styles.css' rel='stylesheet'>
<meta charset="UTF-8">
<title>Data Breach Report January to June 2022</title>
</head>
<body>
<header>
<h1>Data Breach Report January to June 2022</h1>
<div class="headerNav">
<nav>
<ul>
<li>
Executive Summary
</li>
<li>
Notifications received
<ul>
<li>
Large Scale Breaches
</li>
</ul>
</li>
<li>
Source of Breaches
<ul>
<li>
Malicious or criminal attacks
</li>
<li>
Cyber Incidents
</li>
<li>
Human Errors
</li>
<li>
System Faults
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<hr>
<div class="bodyOfPage">
<p>The Office of the Australian Information Commissioner (OAIC) periodically publishes <a
href="https://www.oaic.gov.au/privacy/notifiable-data-breaches/notifiable-data-breaches-statistics">statistical
information</a> about notifications received under the <a
href="https://www.oaic.gov.au/privacy/notifiable-data-breaches">Notifiable Data Breaches (NDB)
scheme</a> to help entities and the public understand privacy risks identified through the scheme. This
report captures notifications made under the NDB scheme from 1 January to 30 June 2022.</p>
<p>Statistical comparisons are to the period 1 July to 31 December 2021 unless otherwise indicated.</p>
<p>Where data breaches affect multiple entities, the OAIC may receive multiple notifications relating to the
same incident. Notifications relating to the same incident are counted as a single notification in this
report unless otherwise specified.</p>
<p>The source of any given breach is based on information provided by the reporting entity. Where more than one
source has been identified or is possible, the dominant or most likely source has been selected. Source of
breach categories are defined in the glossary at the end of this report.</p>
<p>Notifications made under the My Health Records Act 2012 are not included as they are subject to specific
notification requirements set out in that Act.</p>
<p>Statistics in this report are current as of 30 September 2022. Some data breach notifications are being
assessed and adjustments may be made to related statistics. This may affect statistics for the period
January to June 2022 published in future reports. Similarly, statistics from before January 2022 in this
report may differ from statistics published in previous NDB reports.</p>
<h2>Executive summary</h2>
<p>The NDB scheme was established in February 2018 to improve consumer protection and drive better security
standards for protecting personal information. Under the scheme, any organisation or government agency
covered by the <a
href="https://www.oaic.gov.au/privacy/the-privacy-act/rights-and-responsibilities/?stage=Stage#OrgAndAgencyPrivacyActCovers">Privacy
Act 1988</a> that experiences an eligible data breach must notify affected individuals and the OAIC.</p>
<p>The OAIC publishes twice-yearly reports on notifications received under the NDB scheme to track the leading
sources of data breaches and highlight emerging issues and areas for ongoing attention by regulated
entities.</p>
<figure>
<img src="/twa/twa021/practicals/images/executive-summary.png" alt="Summary of Breaches" width="656"
height="411">
<figcaption>
Illustrative Summary of the Data Breaches between January and June 2022
</figcaption>
</figure>
<h3>Key findings for the January to June 2022 reporting period:</h3>
<ul>
<li>396 breaches were notified compared to 460 in July to December 2021 (<b>14% decrease</b>).</li>
<li>Malicious or criminal attack remains the leading source of breaches accounting for 250 notifications
(63% of the total), down 1% in number from 253.</li>
<li>Data breaches resulting from <mark>human error accounted for 131 notifications (33% of the total), down
31% in number from 189.</mark></li>
<li>Health remains the highest reporting sector notifying 20% of breaches, followed by finance (13%).</li>
<li>Contact information remains the most common type of personal information involved in breaches.</li>
<li><mark>91% of breaches affected 5,000 individuals or fewer, while 65% affected 100 people or
fewer.</mark></li>
<li><em>71% of entities notified the OAIC within 30 days of becoming aware of an incident.</em></li>
</ul>
</div>
<footer>
<p>Information has been sourced from OAIC and the <a
href="https://www.oaic.gov.au/__data/assets/pdf_file/0020/23663/OAIC-Notifiable-Data-Breaches-Report-Jan-Jun-2022.pdf">Notifiable
Data Breaches Report January to June 2022</a></p>
</footer>
</body>
</html>
I've tried moving the border around the whole body even the footer but it just stays in place
Any help is greatly appreciated :)
Add overflow: auto to .bodyOfPage to completely wrap the floating element in it.
Related
How would I add a border around the div "border" class? within CSS, I tried doing it before but the border would just show as a straight line on the top of the site and nothing around the div contents. please help! I want there to be a border around the first image along with the h2, h3, menchies class, h4, and walgreens class.
Here is the HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employment</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Joshua Eachus</h1>
<div class="border">
<img class="img" src="headshot.jpg" alt="Joshua Eachus">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies,
I would mainly greet customers, help them around the store if needed and cash them out
with the cash register when ready. I also am constantly busy
making sure every topping and yogurt machine is filled up for the customers.
I would usually be closing so I work 5 to 8 hour shifts every time.
When closing I would put all the toppings away, clean the whole store
completely and prep food for the next day.</p>
<h4>Walgreens</h4>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail
and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens,
one of the main tasks is running the photo department, where I print many kinds of photos,
create canvases and many more projects. Other tasks includes stocking,
outdating, cleaning duties and counting registers.</p>
</div>
<h5>Achievements</h5>
<img class="img2" src="ptk.jpg" alt="PTK">
<p class="ptk">I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically
devoted to recognizing the achievements of honor students at 2-year institutions. Currently,
PTK has approximately 3 million members globally.</p>
</body>
</html>
Here is the CSS Code:
html{background-color:white;}
h1{text-align:center;
font-size:50px;}
h2{position:fixed;
top:180px;
left:475px;
font-size:40px;}
h3{position:fixed;
top:230px;
left:365px;
font-size:33px;}
h4{position:fixed;
top:450px;
left:365px;
font-size:33px;}
h5{position:fixed;
top:130px;
right:430px;
font-size:33px;}
.img{height:470px;
width:320px;
position:fixed;
top:220px; left:15px;}
.img2{width:500px;
height=100px;
position:fixed;
top:250px; right:280px;}
.menchies{position:fixed;
top:290px;
left:350px;
font-size:20px;
width:30%;}
.Walgreens{position:fixed;
top:520px;
left:350px;
font-size:20px;
width:30%;}
.ptk{position:fixed;
top:540px;
right:250px;
font-size:18px;
width:30%;}
Stop using position fixed
You are using CSS to shoot yourself in the foot, stop it. Go watch some Layout Land and take Kevin Powell's free Conquering Responsive Layouts course.
/*
html {
background-color: white; Background is already white
}
*/
h1 {
text-align: center;
font-size: 3rem;
/* Use font sizes that respect the user setting */
}
body {
max-width: 60ch;
margin-inline: auto;
}
.border {
border: 2px solid tomato;
}
/*
DO NOT POSITION FIX EVERYTHING
h2 {
position: fixed;
top: 180px;
left: 475px;
font-size: 40px;
}
h3 {
position: fixed;
top: 230px;
left: 365px;
font-size: 33px;
}
h4 {
position: fixed;
top: 450px;
left: 365px;
font-size: 33px;
}
h5 {
position: fixed;
top: 130px;
right: 430px;
font-size: 33px;
}
.img {
height: 470px;
width: 320px;
position: fixed;
top: 220px;
left: 15px;
}
.img2 {
width: 500px;
height=100px;
position: fixed;
top: 250px;
right: 280px;
}
.menchies {
position: fixed;
top: 290px;
left: 350px;
font-size: 20px;
width: 30%;
}
.Walgreens {
position: fixed;
top: 520px;
left: 350px;
font-size: 20px;
width: 30%;
}
.ptk {
position: fixed;
top: 540px;
right: 250px;
font-size: 18px;
width: 30%;
}
*/
<h1> Joshua Eachus</h1>
<div class="border">
<img class="img" src="headshot.jpg" alt="Portrait of Joshua Eachus">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies, I would mainly greet customers, help them around the store if needed and cash them out with the cash register when ready. I also am constantly busy making sure every topping and yogurt
machine is filled up for the customers. I would usually be closing so I work 5 to 8 hour shifts every time. When closing I would put all the toppings away, clean the whole store completely and prep food for the next day.</p>
<h3>Walgreens</h3>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens, one of the main tasks is running the photo department, where I
print many kinds of photos, create canvases and many more projects. Other tasks includes stocking, outdating, cleaning duties and counting registers.</p>
</div>
<h2>Achievements</h2>
<img class="img2" src="ptk.jpg" alt="PTK">
<p class="ptk">I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically devoted to recognizing the achievements of honor students at 2-year institutions. Currently, PTK has approximately 3 million
members globally.</p>
Here I have rearranged your site layout! Just have a look at it and try to understand how to do it in proper way. Please click on full page when you run this in the Stack Overflow code snippet because this is not mobile friendly.
If you want to learn more about this, visit W3Schools CSS Website Layout tutorial or any other one which is related to this.
h1{
font-size: 50px;
text-align: center;
line-height: 5px;
}
h2{
font-size: 40px;
text-align: center;
line-height: 0px;
padding-bottom: 10px;
}
h3{
font-size: 30px;
line-height: 5px;
}
p{
font-size: 20px;
text-align: justify;
}
.container{
width: 100%;
border: 1px solid #ff00ff;
padding: 10px;
box-sizing: border-box;
}
.section{
padding: 15px;
display: inline-block;
vertical-align: middle;
}
.one{
width: 20%;
}
.two{
width: 35%;
}
.three{
width: 35%;
}
img{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employment</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Joshua Eachus</h1>
<div class="container">
<div class="section one">
<img src="https://i.ibb.co/VLV0qfv/Wood-Floor-Texture-Seamless.jpg" alt="Joshua Eachus">
</div>
<div class="section two">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p class="menchies"> Between January 2020-November 2020 I was a team member at menchies,
I would mainly greet customers, help them around the store if needed and cash them out with the cash register when ready. I also am constantly busy making sure every topping and yogurt machine is filled up for the customers. I would usually be closing so I work 5 to 8 hour shifts every time. When closing I would put all the toppings away, clean the whole store completely and prep food for the next day.</p>
<h3>Walgreens</h3>
<p class="Walgreens"> I am currently working at Walgreens, which has been a great introduction into retail and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens, one of the main tasks is running the photo department, where I print many kinds of photos, create canvases and many more projects. Other tasks includes stocking, outdating, cleaning duties and counting registers.</p>
</div>
<div class="section three">
<h3>Achievements</h3>
<img src="https://i.ibb.co/VLV0qfv/Wood-Floor-Texture-Seamless.jpg" alt="PTK" style="height: 200px;">
<p>I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically devoted to recognizing the achievements of honor students at 2-year institutions. Currently, PTK has approximately 3 million members globally.</p>
</div>
</div>
</body>
</html>
Your problem is because you have used position:fixed; in almost every element. Please stop doing that and if you want to clarify whether your border is working properly or not, please give some padding to it and then you will see it works properly.
.border{
border: 1px solid #ff00ff;
padding: 10px;
}
<div class="border">
</div>
If you can show what you actually need to make, I will be able to do it without using position: fixed; If you have a image of what you exactly need, just share it with us.
Thanks and best regards!
I have a styled numbered list but text is wrapping under the number.
How can I fix it.
I have numbers styled using CSS. I tried using different padding and margins, nothing works.
ol.numbered-list {
counter-reset:item;
margin-left:20;
padding-left:0;
}
ol>li {
counter-increment:item;
list-style:none inside;
margin: 30px 0;
overflow: hidden;
font-size: 16px !important;
line-height: 1.3;
text-indent: -1em;
}
ol>li:before {
content:counter(item) ;
margin-right: 20px;
padding: 8px;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 45px;
background: #fff;
border: 2px solid #01A7E5;
color: #01A7E5;
text-align: center;
font: 20px 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 800;
float: left;
}
<ol class="numbered-list">
<li><strong><span style="color:#01A7E5;">Invoice Number</span></strong></li>
<li><strong><span style="color:#01A7E5;">Service Address:</span></strong> The address where you receive Entrust Energy electricity service.</li>
<li><strong><span style="color:#01A7E5;">Account Number:</span></strong> Your Account Number identifies each Entrust Energy account you may have and is often used to pay your electric bill or set up recurring payments. You may have more than one Account
Number.
</li>
<li><strong><span style="color:#01A7E5;">Bill Date: </span></strong>The date your electric bill is processed. You will receive one electric bill per month.</li>
<li><strong><span style="color:#01A7E5;">Account Summary:</span></strong> An itemization of your balance, payments
<g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" data-gr-id="18" id="18">and</g> charges for electric service as disclosed in your electricity facts label (EFL), including applicable taxes and fees. Please refer to the EFL you received when you signed up with Entrust Energy for more information about your applicable
electric bill rates.</li>
<li><strong><span style="color:#01A7E5;">Total Amount Due:</span> </strong>This is the total amount that you currently owe Entrust Energy, including past due balances from your previous electric bills. When paying your electric bill by mail, please do
so at least five days prior to the due date so that we receive your bill on time. Click here to learn about your other payment options.</li>
</ol>
Is this what you're looking for? I have removed the float:left from your :before tag - as this usually removes the item from the usual layout.
In order to make the :before and your content align on one line - I've wrapped your text in a <p> tag and used display:flex on the list items (li).
ol.numbered-list {
padding-left: 0;
}
ol>li {
counter-increment: item;
margin: 15px 0;
display: flex;
}
ol>li:before {
content: counter(item);
margin-right: 20px;
padding: 8px;
border-radius: 50%;
min-width: 45px;
height: 45px;
border: 2px solid #01A7E5;
color: #01A7E5;
text-align: center;
font: 20px 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 800;
}
p {
margin: 0;
}
<ol class="numbered-list">
<li>
<p>
<strong><span style="color:#01A7E5;">Invoice Number</span></strong>
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Service Address:</span></strong> The address where you receive Entrust Energy electricity service.
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Account Number:</span></strong> Your Account Number identifies each Entrust Energy account you may have and is often used to pay your electric bill or set up recurring payments. You may have more than one Account
Number.
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Bill Date: </span></strong>The date your electric bill is processed. You will receive one electric bill per month.
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Account Summary:</span></strong> An itemization of your balance, payments
<g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" data-gr-id="18" id="18">and</g> charges for electric service as disclosed in your electricity facts label (EFL), including applicable taxes and fees. Please refer to the EFL you received when you signed up with Entrust Energy for more information about your applicable
electric bill rates.
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Total Amount Due:</span> </strong>This is the total amount that you currently owe Entrust Energy, including past due balances from your previous electric bills. When paying your electric bill by mail, please
do so at least five days prior to the due date so that we receive your bill on time. Click here to learn about your other payment options.
</p>
</li>
</ol>
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;
I've tried to create a right sidebar within my div, but it's not working. It keeps sitting outside of my main wrapper. Any suggestions?
HTML:
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932. In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation of the Butler County Regional Airport as you see it today.</p>
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li> Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div><!--sidebar end-->
CSS:
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width:260px;
padding:10px;
margin-top:10px;
margin-bottom: 10px;
margin-left:10px;
float:right
}
Here's my fiddle: https://jsfiddle.net/5w8xprqg/2/
If you are content with a fixed width layout, here are the minimum changes to your fiddle that need to be made to get the sidebar where it should be. If you want a responsive layout, you will have to switch over to defining widths and such with percentages.
CSS
wrapper {display:table
}
.body-text {margin: 10px;
float: left;
width: 470px;
}
And the updated jsfiddle. https://jsfiddle.net/5w8xprqg/3/
One mistake was using a 320px margin on the right of your body text which would never let your sidebar flow up next to the body text. Use width to do that kind of thing instead. Also using float:left on elements higher up the DOM usually works better than trying to float:right elements further down. Note you don't really need the float on the .side-right element, but it works.
On a separate note there are other ways that your problems can be avoided and get a superior layout with less css.
One problem I believe you were experiencing was the text overflowing the at the bottom of the wrapper. This can usually be prevented by adding display:table;or overflow:hidden What the last one does is not what you would expect, but instead of the overflowing text being hidden it forces the container to stretch down and contain it.
Also using percentages for your widths today is a better practice.
See this jsfiddle, and notice how little css is necessary to get the layout in the working properly. http://jsfiddle.net/5w8xprqg/4/ Also resize the results box to see how the text adjusts to fit the width.
To get even better layout at very narrow widths, you would want to add in media queries.
There are many ways to do this, and it depends if you want your bodytext to wrap your sidebar. Here is one way, where I created a left side with set width, and right side with set width. Fiddle here: http://jsfiddle.net/t0837grw/
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #ccc;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px;
padding: 20px;
}
.sideleft
{
display: inline-block;
width: 65%;
}
.sideright {
display: inline-block;
vertical-align: top;
width:30%;
margin: 0 10px;
}
Here is alternate fiddle with set widths: http://jsfiddle.net/6e6btgds/
In the context of the code in the question, the simplest solution might be to swap the locations of the .bodytext and .sideright elements in the mark-up.
#charset "UTF-8";
/* CSS Document */
body {
background-color: #2c3439;
color: #FFF;
}
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
#topnav ul {
margin: -11px -10px 10px -10px;
text-align: center;
padding: 1%;
background-color: #000;
color: #FFF;
}
#topnav li {
display: inline;
margin: 0px 40px;
}
.centerimage {
margin: 10px 165px;
}
p {
text-indent: 2.5em;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width: 260px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px float: right
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="topnav">
<ul>
<li>Home</li>
<li>Aircraft Rental</li>
<li>Contact Us</li>
<li>Flight Training</li>
</ul>
</nav>
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li>Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div>
<!--sidebar end-->
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932.
In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the
years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation
of the Butler County Regional Airport as you see it today.</p>
</div>
<!--text div end-->
</div>
<!--Wrapper End-->
</body>
</html>
I am struggling with CSS. In this example, could anyone help me understand why the "aside" is not floating to the right just below the picture emplacement? Why is it so low in the page?
Thanks for your advice.
HTML
<body>
<nav id="top-menu">
<ul>
<li> Home </li>
<li> Charting </li>
<li> Map </li>
<li> Financials </li>
<li> Forum </li>
<li> About </li>
</ul>
</nav>
<div id="maindiv">
<header>
<img class="img-right" src="images/Inkscape_stocktails_240_240.png"
alt="Stocktail" width="240" height="240" />
<hgroup>
<h1> Welcome to Stocktails </h1>
</hgroup>
<p> The perfect blend for your investment portfolio </p>
</header>
<article class="story">
<h1> Start investing today with Stocktails </h1>
<p>
Stocktails is a collection of tools and resources to facilitate the investing process, from data retrieval, stock analysis and valuation, up to the construction and monitoring of your portfolio.
</p>
</article>
<article class="story">
<h1> The renaissance of value investing </h1>
<p>
As the world economy slowly emerges and recovers from the Great Recession,
appetite for stocks is still on the wane. Stung by three successive market crashes in recent memory (1987, 2000, 2008),
retail investors turned their attention away from common shares and towards presumably safer assets, such as property.
In parallel, institutional investors, from insurance companies to endowments, have greatly diversified their holdings towards private equity, hedge funds and hard assets.
</p>
<p>
<em>Stocks are down, but not out</em>. It is our belief that they may even be on the verge of a renaissance. As most alternative asset classes,
notably sovereign bonds and property, exhibit signs of a bubble, the pendulum is may be about to swing in the reverse direction.
<strong>Now is the time for the savvy investor to put stocks back at the core of his portfolio</strong>.
</p>
<blockquote>"I will tell you how to become rich. Close the doors. Be fearful when others are greedy. Be greedy when others are fearful." (<cite>Warren Buffet</cite>)</blockquote>
<p>
In addition to a reduced appetite for stocks, modern portfolio theory - that notably relies on the efficient markets hypothesis - led many investors to give up on stock picking
and to invest into passive funds instead (cf. <cite>A random walk down Wall-Street</cite>, by B. Malkiel). As investors buy under-valued shares and spurn or short-sell the richly-valued, prices will tend to align with risk,
making it more difficult to find value in the market. Eventually, the average participant stops scouting for value and resigns himself to purchasing the index.
But not all companies are created equal and opportunities are bound to reappear. It is precisely when the market capitulates that the discerning investor should step back in to pick value stocks.
</p>
<p>
Value investing also suffered from the action of central banks. The unprecedented level of liquidity introduced by quantitative easing in the US, the UK, the EU and Japan was key to prevent an outright depression.
It has also been a boon for most investors. The resulting suppression of interest rates lifted all boats, with little regard for the quality of the asset.
As the tide reverses, the overall performance of the market is bound to disappoint. But we also expect a large variation of performance between strong and weak companies. The stars will then be aligned for the value investor to find gems among the wreck.
</p>
</article>
<article class="story">
<h1> Top 10 investing tips from <cite>Warren Buffet</cite>, the Oracle of Omaha </h1>
<ul>
<li>"It's far better to buy a wonderful company at a fair price than a fair company at a wonderful price."</li>
<li>"Rule No. 1: never lose money; rule No. 2: don't forget rule No. 1"</li>
<li>"Our approach is very much profiting from lack of change rather than from change. With Wrigley chewing gum, it's the lack of change that appeals to me. I don't think it is going to be hurt by the Internet. That's the kind of business I like."</li>
<li>"I try to buy stock in businesses that are so wonderful that an idiot can run them. Because sooner or later, one will."</li>
<li>"The stock market is a no-called-strike game. You don't have to swing at everything – you can wait for your pitch. The problem when you're a money manager is that your fans keep yelling, "Swing, you bum!""</li>
<li>"Price is what you pay; value is what you get. Whether we're talking about socks or stocks, I like buying quality merchandise when it is marked down."</li>
<li>"Never count on making a good sale. Have the purchase price be so attractive that even a mediocre sale gives good results."</li>
<li>"If you understood a business perfectly and the future of the business, you would need very little in the way of a margin of safety."</li>
<li>"We've long felt that the only value of stock forecasters isto make fortune tellers look good. Even now, Charlie [Munger] and I continue to believe that short-term market forecasts are poison and should be kept locked up in a safe place, away from children and also from grown-ups who behave in the market like children."</li>
<li>"We don't get paid for activity, just for being right. As to how long we'll wait, we'll wait indefinitely."</li>
</ul>
</article>
<aside class="about">
<header>
<h1> How to use Stocktails </h1>
<p> A collection of tools to cover the entire investment process </p>
</header>
<section>
<hgroup>
<h1> Stock quotes </h1>
<h2> Price, Volume, Ratios, etc. </h2>
</hgroup>
<p> Keep track of your stocks' movements </p>
</section>
<section>
<hgroup>
<h1> Fundamentals </h1>
<h2> Yearly and quarterly financials </h2>
</hgroup>
<p> Stock valuation and analysis </p>
</section>
<section>
<hgroup>
<h1> Portfolio building </h1>
<h2> Optimize the performance of your assets </h2>
</hgroup>
<p> Sophisticated tools to diversify risk and boost performance </p>
</section>
<section>
<hgroup>
<h1> Discussion </h1>
<h2> Forum </h2>
</hgroup>
<p> Share your investing ideas with other savvy investors </p>
</section>
</aside>
<div class="clear"></div>
</div>
<footer>
<p>
Copyright © 2014.
</p>
</footer>
</body>
CSS
body {
background-color: #fffbef;
}
.story p {
line-height: 1.2;
text-align: justify;
}
h1, h2, h3, h4, h5, h6 {
font-family: sans-serif;
color: #093844;
}
.clear {
margin: 0;
padding: 0;
clear: both;
}
img.img-right {
display: block;
float: right;
border: none;
padding: 2px;
margin: 3px 6pt 3px 6px;
}
/* navigation menu */
nav#top-menu {
width: 100%;
height: 50px;
//background-color: #fff2c1;
margin: 0;
padding: 0;
}
#top-menu ul {
display: block;
list-style-type: none;
width: 600px;
margin: 0 auto;
padding: 0;
}
#top-menu ul li {
margin: 0;
padding: 0;
}
#top-menu ul li a {
display: block;
float: left;
max-height: 25px;
width: 100px;
margin: 0;
padding: 5px 0;
font-family: sans-serif;
font-size: 20px;
text-align: center;
text-decoration: none;
color: #52736b;
border-bottom: #fffbef solid 2px;
}
#top-menu ul li a:hover { border-bottom: #52736b solid 2px; }
/* header */
header h1 { margin-top: 0; }
header p {
font-family: sans-serif;
font-weight: bold;
font-style: italic;
font-size: 85%;
margin: .25ex 12pt;
color: #093844;
}
/* maindiv */
#maindiv {
width: 1250px;
margin: 0 auto;
padding: 10px;
background-color: #eec;
}
/* article */
article {
width: 950px;
float: left;
}
article h1 {
font-size: 110%;
margin-top: 12pt;
padding-top: 3pt;
border-top: 4px solid #52736b;
}
/* aside */
aside.about {
float: right;
width: 238px;
background-color: #b7c4b1;
margin: 3pt 6pt 3pt 6pt;
}
aside h1 { font-size: 110%; }
aside h2 { font-size: 90%; }
aside p {
margin: 0 12pt;
font-family: sans-serif;
font-style: italic;
font-size: 80%;
}
aside section h1 {
padding-top: 3pt;
border-top: 4px solid #4f5856;
}
aside header p {
font-size: 85%;
}
aside section {
padding: 5px 0 5px 0;
}
/* footer */
footer {
background: #4f5856;
clear: all;
}
footer p {
color: #8c8e7e;
font-size: 70%;
font-family: sans-serif;
text-align: center;
margin: 0;
padding: 10px 0;
}
LC
Because your articles are floated left and the position of your aside is low in the document, the rules of floats say that
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
The way around that is to move your aside element up higher in the document:
jsFiddle example
<article class="story"></article>
<article class="story"></article>
<aside class="about"></aside>
<article class="story"></article>
just add clear: both; and modify your html like in the demo
aside.about {
float: right;
width: 238px;
background-color: #b7c4b1;
margin: 3pt 6pt 3pt 6pt;
clear: both;
}
Html
<header></header>
<aside class="about"></aside><!-- moved -->
<article class="story"></article>
Demo