So far, I have got several things going well until my table will not go below my lists.
It is stuck at the top, and when I try and table { margin-top: 100px} it moves the table down from the top, but also moves everything below it down, I am wanting it below everything.
<!DOCTYPE html>
<html>
<head>
<title>HTML Project</title>
<style>
ol {
text-align: center;
z-index: 3;
position: relative;
opacity: .99;
list-style-type: none;
}
img {
width: 200px;
height: 128px;
}
ul {
text-align: center;
z-index: 3;
position: relative;
opacity: .99;
list-style-type: none;
}
</style>
<div>
<body>
<div style="width: 500px; float:left; height:500px; margin:100px">
<h1>My favorite games</h1>
<br><br>
<ol style="float:left">
<li>Arma 3 - <a href="https://en.wikipedia.org/wiki/ARMA_3"> HERE</a></li>
<br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/ArmA_3_Logo_(Black_Transparent)_(SVG).svg/1200px-ArmA_3_Logo_(Black_Transparent)_(SVG).svg.png" />
<br>
<li>World of Tanks - <a href="https://en.wikipedia.org/wiki/World_of_Tanks"> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/2ef36636-4f93-4e6b-a514-6e14b62670b3/World-of-Tanks-Logo-removebg-preview.png" />
<br><br>
<li>Grand Theft Auto V - <a href="https://en.wikipedia.org/wiki/Grand_Theft_Auto_V"> HERE</a></li>
<br>
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br>
<li>Counter Strike: Global Offense - <a href="https://en.wikipedia.org/wiki/Counter-Strike:_Global_Offensive"> HERE</a></li>
<br>
<img src="https://www.vippng.com/png/full/62-621853_counter-strike-global-offensive-2-logo-black-and.png" />
<br><br>
<li>Digital Combat Simulator World - <a href="https://en.wikipedia.org/wiki/Digital_Combat_Simulator"> HERE</a></li>
<img src="https://o.remove.bg/downloads/be1dcb6f-0a71-4d4a-a647-553fda3dce23/il_570xN.2519210705_9zed-removebg-preview.png" />
</ol>
</div>
<div style="width: 500px; float:right; height:500px; margin:100px">
<h1>My favorite movies</h1>
<br><br>
<ul style="float:left">
<li>Ant-Man - <a href=""> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/28ee2a8a-99b6-43f5-b497-9b91da9328c6/s-l640-removebg-preview.png" ; style="width:250px" />
<br>
<li>Deadpool - <a href=""> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/bb200f2d-93d0-414d-8128-e22bd7849f02/Deadpool-poster-removebg-preview.png" />
<br><br>
<li>Jurassic Park - <a href=""> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/ac0743ca-d015-41de-8ab5-a2f9c2868850/Jurassic_Park__franchise_logo_-removebg-preview.png" />
<br>
<li>Jurassic World - <a href=""> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/3473a625-97ec-4eb7-9c7b-be175cb6af2a/jurassicworldlogo-removebg-preview.png" />
<br><br>
<li>Curious George - <a href=""> HERE</a></li>
<img src="https://o.remove.bg/downloads/1ccc478a-eac9-4ec4-a953-44d6a6de704e/Curious-George-Logo-clipart-removebg-preview.png" />
</ul>
</div>
<table>
<th>
<td>Game</td>
<td>Publisher(s)</td>
<td>Realese Date</td>
<td>Platform(s)</td>
</th>
<tr>
<td>Arma 3</td>
<td>Bohemia Interactive</td>
<td>September 12, 2013</td>
<td>Microsoft Windows | macOS</td>
</tr>
</table>
</body>
</div>
</html>CodePudding user response：
there is an issue with positions wrappers I have fixed the issue
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Project</title>
<style>
ol {
text-align: center;
z-index: 3;
position: relative;
opacity: 0.99;
list-style-type: none;
}
img {
width: 200px;
height: 128px;
}
ul {
text-align: center;
z-index: 3;
position: relative;
opacity: 0.99;
list-style-type: none;
}
</style>
</head>
<body>
<div style="display: block; float: left; width: 100%;">
<div style="width: 500px; float: left; margin: 100px;">
<h1>My favorite games</h1>
<br /><br />
<ol style="float: left;">
<li>
Arma 3 - <a href="https://en.wikipedia.org/wiki/ARMA_3"> HERE</a>
</li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br />
<li>
World of Tanks -
<a href="https://en.wikipedia.org/wiki/World_of_Tanks"> HERE</a>
</li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br /><br />
<li>
Grand Theft Auto V -
<a href="https://en.wikipedia.org/wiki/Grand_Theft_Auto_V"> HERE</a>
</li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br />
<li>
Counter Strike: Global Offense -
<a
href="https://en.wikipedia.org/wiki/Counter-Strike:_Global_Offensive"
>
HERE</a
>
</li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br /><br />
<li>
Digital Combat Simulator World -
<a href="https://en.wikipedia.org/wiki/Digital_Combat_Simulator">
HERE</a
>
</li>
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
</ol>
</div>
<div style="width: 500px; float: right; margin: 100px;">
<h1>My favorite movies</h1>
<br /><br />
<ul style="float: left;">
<li>Ant-Man - <a href=""> HERE</a></li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br />
<li>Deadpool - <a href=""> HERE</a></li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br /><br />
<li>Jurassic Park - <a href=""> HERE</a></li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br />
<li>Jurassic World - <a href=""> HERE</a></li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br /><br />
<li>Curious George - <a href=""> HERE</a></li>
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
</ul>
</div>
</div>
<div style="display: block; float: left; width: 100%;">
<table>
<tr>
<th>Game</th>
<th>Publisher(s)</th>
<th>Realese Date</th>
<th>Platform(s)</th>
</tr>
<tr>
<td>Arma 3</td>
<td>Bohemia Interactive</td>
<td>September 12, 2013</td>
<td>Microsoft Windows | macOS</td>
</tr>
</table>
</div>
</body>
</html>output can be seen here in full screen: https://4rrmg.csb.app/ with sandbox : https://codesandbox.io/s/cool-mayer-4rrmg?file=/index.html:0-3450