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;
}
Step by step
Solved in 5 steps
