Can someone help me with this, for some reason my code isnt working and I am trying to figure out why. There should be three boxes like in the picture shown below. I was trying to put the links alone in the first box. the sentence starting with "A country demesne" and ending with "sussex" in the middle box and the rest of the text in the third box. However, it has all morphed into one box as I have started placing the floating images. Can someone help me get it back to three boxes while making sure I can put images where they are supposed to be located according to the diagram HTML:
Can someone help me with this, for some reason my code isnt working and I am trying to figure out why. There should be three boxes like in the picture shown below. I was trying to put the links alone in the first box. the sentence starting with "A country demesne" and ending with "sussex" in the middle box and the rest of the text in the third box. However, it has all morphed into one box as I have started placing the floating images. Can someone help me get it back to three boxes while making sure I can put images where they are supposed to be located according to the diagram
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Flexbox Coding</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<header class="header-image">
<img src="57mBcYi.jpeg" alt="Header Image">
</header>
<div class="flex-container">
<div class="content-container">
<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>
A 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>
</div>
</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;
}
.content-container {
background-color: white;
width: 50%;
margin: 10px;
padding: 10px;
font-size: 16px;
position: relative; /* Added relative positioning */
}
.floating-image {
max-width: 20%;
max-height: 20%;
margin: 10px 0; /* Added margin to separate floating images */
}
.header-image img,
.footer-image img {
width: 100%;
height: auto;
}
.footer-image {
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}
Step by step
Solved in 4 steps with 1 images
