How do I add multiple floating images but keep them contained to the layout below like the guide image I have below? I have a floating image but it is just staying in the middle of the page. Also why is my footer image on the right instead of at the bottom where it should be? HTML Flexbox Coding Link to Page 1 Link to Page 2 An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel. Depending conveying direction has led immediate. Law gate her well bed life feet seen rent. On nature or no except it sussex. May indulgence difficulty ham can put especially. Bringing remember for supplied her why was confined. Middleton principle did she procuring extensive believing add. Weather adapted prepare oh is calling. These wrong of he which there smile to my front. He fruit oh enjoy it of whose table. Cultivated occasional old her unpleasing unpleasant. At as do be against pasture covered viewing started. Enjoyed me settled mr respect no spirits civilly. CSS: body { background-color: black; margin: 0; padding: 0; } .flex-container { display: flex; } .flex-container > div { background-color: white; width: 50%; margin: 10px; padding: 10px; font-size: 16px; } .floating-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } .header-image img { width: 100%; height: auto; } .footer-image { text-align: center; background-color: #f0f0f0; padding: 20px; } .footer-image img { width: 100%; height: auto; }
How do I add multiple floating images but keep them contained to the layout below like the guide image I have below? I have a floating image but it is just staying in the middle of the page. Also why is my footer image on the right instead of at the bottom where it should be?
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Flexbox Coding</title>
</head>
<link rel="stylesheet" href="Style.css">
<body>
<header class="header-image">
<img src="57mBcYi.jpeg" alt="Header Image">
</header>
<div class="flex-container">
<div>
<ul>
<li><a href="Page1.html">Link to Page 1</a></li>
<li><a href="Page2.html">Link to Page 2</a></li>
</ul>
</div>
<div>An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel. Depending conveying direction has led immediate. Law gate her well bed life feet seen rent. On nature or no except it sussex.
<img class="floating-image" src="OIP.jpg" alt="Lego Star Wars">
</div>
<div>May indulgence difficulty ham can put especially. Bringing remember for supplied her why was confined. Middleton principle did she procuring extensive believing add. Weather adapted prepare oh is calling. These wrong of he which there smile to my front. He fruit oh enjoy it of whose table. Cultivated occasional old her unpleasing unpleasant. At as do be against pasture covered viewing started. Enjoyed me settled mr respect no spirits civilly.
</div>
<footer class="footer-image">
<img src="banner.jpg" alt="Footer Image">
</footer>
</body>
</html>
CSS:
body {
background-color: black;
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
}
.flex-container > div {
background-color: white;
width: 50%;
margin: 10px;
padding: 10px;
font-size: 16px;
}
.floating-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
.header-image img {
width: 100%;
height: auto;
}
.footer-image {
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}
.footer-image img {
width: 100%;
height: auto;
}
![• Link to Page 1
• Link to Page 2
An country demesne message i
doubtful as concerns at. Mornin
by. On could my in order never
to parties colonel. Depending c
immediate. Law gate her well b
nature or no except it sussex.
LEGO
M
STAR
WARS
put especially. Bringing
confined. Middleton
e believing add. Weather
wrong of he which there
it of whose table.
asing unpleasant. At as do
started. Enjoyed me settled
AL 41 14 #1
11 11
LI
L 41 41 U](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fbf238986-8ffc-4b99-b1ca-533b8fe8c6d3%2F197fa23e-5d9a-4b79-af19-753c4e52dcad%2Fr5hce9_processed.png&w=3840&q=75)
![PAGE 1:
Header
Theme picture/image (should be the same on both pages)
Navigation
Link to PAGE 1
Link to PAGE 2
(should be the same on
both pages)
PAGE 2:
Content of PAGE 1
That Contain at least two floating
images
Navigation
Link to PAGE 1
Link to PAGE 2
(should be the same on
both pages)
Footer
(should be the same on both pages)
Header
Theme picture/image(should be the same on both pages)
Content of PAGE 2
That Contain at least two floating
images
Content of PAGE 1
That Contain at least one
floating images
Footer
(should be the same on both pages)
Content of PAGE 2
That Contain at least one
floating images](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fbf238986-8ffc-4b99-b1ca-533b8fe8c6d3%2F197fa23e-5d9a-4b79-af19-753c4e52dcad%2F5u4i62_processed.png&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 5 steps
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
![C How to Program (8th Edition)](https://www.bartleby.com/isbn_cover_images/9780133976892/9780133976892_smallCoverImage.gif)
![Database Systems: Design, Implementation, & Manag…](https://www.bartleby.com/isbn_cover_images/9781337627900/9781337627900_smallCoverImage.gif)
![Programmable Logic Controllers](https://www.bartleby.com/isbn_cover_images/9780073373843/9780073373843_smallCoverImage.gif)