Can someone help me fix my flexboxes so all the boxes take up the same amount of space instead of the right box being crunched and my image not showing up? I am trying to get it so that the right box not only has the same amount of space on the page as the other two but also the image I have inside takes up that entire right most box. HTML CODE: Flexbox Coding Overview The First Doctor The Second Doctor The Third Doctor The Fourth Doctor The Fifth Doctor The Sixth Doctor The Seventh Doctor The Eighth Doctor The War Doctor The Ninth Doctor The Tenth Doctor The Eleventh Doctor The Twelfth Doctor The Thirteenth Doctor survey The Doctor is a Time Lord from the planet Gallifrey who travels through time and space in the TARDIS, a blue police box. Possessing the unique ability to regenerate into a new form when mortally wounded, the Doctor has been portrayed by various actors over the years. Motivated by a strong sense of justice and compassion, the Doctor works to thwart evil, solve problems, and protect civilizations, often accompanied by diverse companions on these thrilling adventures. CSS CODE: body { background-color: blue; margin: 0; padding: 0; } .table { width: 100%; table, th, td; border: 1px solid white; } .flex-container { display: flex; } .flex-container > div { background-color: white; width: 25%; margin: 5px; padding: 5px; font-size: 16px; } .header-image img, .footer-image img, .flex-container > div img { width: 100%; height: 200px; } .flex-container > div:last-child { flex: 1; } .footer-image { text-align: center; background-color: white; padding: 10px; }
Can someone help me fix my flexboxes so all the boxes take up the same amount of space instead of the right box being crunched and my image not showing up? I am trying to get it so that the right box not only has the same amount of space on the page as the other two but also the image I have inside takes up that entire right most box.
HTML CODE:
<title>Flexbox Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-image">
<img src="night-planets-header-8854-1024x300.jpg" alt="Header Image">
</header>
<div class="flex-container">
<div>
<ul>
<li><a href="Overview.html">Overview</a></li>
<li><a href="The_First_Doctor.html">The First Doctor</a></li>
<li><a href="The_Second_Doctor.html">The Second Doctor</a></li>
<li><a href="The_Third_Doctor.html">The Third Doctor</a></li>
<li><a href="The_Fourth_Doctor.html">The Fourth Doctor</a></li>
<li><a href="The_Fifth_Doctor.html">The Fifth Doctor</a></li>
<li><a href="The_Sixth_Doctor.html">The Sixth Doctor</a></li>
<li><a href="The_Seventh_Doctor.html">The Seventh Doctor</a></li>
<li><a href="The_Eighth_Doctor.html">The Eighth Doctor</a></li>
<li><a href="The_War_Doctor.html">The War Doctor</a></li>
<li><a href="The_Ninth_Doctor.html">The Ninth Doctor</a></li>
<li><a href="The_Tenth_Doctor.html">The Tenth Doctor</a></li>
<li><a href="The_Eleventh_Doctor.html">The Eleventh Doctor</a></li>
<li><a href="The_Twelfth_Doctor.html">The Twelfth Doctor</a></li>
<li><a href="The_Thirteenth_Doctor.html">The Thirteenth Doctor</a></li>
<li><a href="survey.html">survey</a></li>
</ul>
</div>
<div>
<img src="OverviewImage.jpg" alt="Overview">
</div>
<div>
<img src="OverviewImage.jpg" alt="Overview">
The Doctor is a Time Lord from the planet Gallifrey who travels through time and space in the TARDIS, a blue police box. Possessing the unique ability to regenerate into a new form when mortally wounded, the Doctor has been portrayed by various actors over the years. Motivated by a strong sense of justice and compassion, the Doctor works to thwart evil, solve problems, and protect civilizations, often accompanied by diverse companions on these thrilling adventures.
</div>
</div>
<footer class="footer-image">
<img src="TardisFooter.jpg" alt="Footer Image">
</footer>
</body>
</html>
CSS CODE:
body {
background-color: blue;
margin: 0;
padding: 0;
}
.table {
width: 100%;
table, th, td;
border: 1px solid white;
}
.flex-container {
display: flex;
}
.flex-container > div {
background-color: white;
width: 25%;
margin: 5px;
padding: 5px;
font-size: 16px;
}
.header-image img,
.footer-image img,
.flex-container > div img {
width: 100%;
height: 200px;
}
.flex-container > div:last-child {
flex: 1;
}
.footer-image {
text-align: center;
background-color: white;
padding: 10px;
}
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 3 images
