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 >
<nav>
<ul>
<li>
<a href="exercise4.html">Executive Summary</a>
</li>
<li>
<a href="exercise5.html">Notifications received</a>
<ul>
<li>
<a href="exercise5.html#large-scale">Large Scale Breaches</a>
</li>
</ul>
</li>
<li>
<a href="exercise6.html">Source of Breaches</a>
<ul>
<li>
<a href="exercise6.html#malicoius-or-criminal">Malicious or criminal attacks</a>
</li>
<li>
<a href="exercise6.html#cyber-incidents">Cyber Incidents</a>
</li>
<li>
<a href="exercise6.html#human-error">Human Errors</a>
</li>
<li>
<a href="exercise6.html#system-faults">System Faults</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<hr>
<div >
<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 <a href="https://oaic.gov.au">OAIC</a> 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 :)
CodePudding user response：
Add overflow: auto to .bodyOfPage to completely wrap the floating element in it.