I have a container with two DIVs already and I would like to add a third, identical to the first and second. However, it keeps showing up outside the container. Here is my HTML and CSS:
#results-summary-container {
border: 2px solid #e0e0e0;
box-shadow: 3px 4px 10px #585858;
width: 400px;
height: 180px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.9);
position: absolute;
top: 63%;
left: 10px;
color: black;
font-weight: bold;
text-align: center;
}
#results-summary-container h2 {
display: block;
width: 400px;
margin: 5px auto;
}
#results-summary-items {
display: block;
margin: auto;
width: 210px;
}
.result-item {
opacity: 0;
display: inline-block;
margin-left: 10px;
margin-top: 20px;
width: 80px;
font-size: 30px;
border-radius: 10px;
font-weight: bolder;
text-align: center;
vertical-align: middle;
transition: opacity 1s ease-in;
}
#pnp-count {
background-color: #fca925;
}
#jlp-count {
background-color: #60ff2a;
}<div id="results-summary-container">
Click on an electoral division for more detailed information.
<br>
<h2>Election Result Summary</h2>
<div id="results-summary-items">
<div class="result-item" id="jlp-count" title="JLP seat count"> JLP</div>
<div class="result-item" id="pnp-count" title="PNP seat count"> PNP</div>
<div class="result-item" id="pnp-count" title="PNP seat count"> PNP</div>
<div class="result-item clear"></div>
</div>I tried just adding a third "<div> </div>"
It the it outside the container. I tried altering the CSS but no luck.
Chesouye is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
4
The issue you’re facing could be caused by the fact that you’re using an empty div with the class clear. This is often used to clear floats, but it may be pushing the third div outside of its container depending on how the layout is structured.
Here’s how you can fix it:
Ensure that your .result-item elements are correctly styled to fit within the parent container.
If the .clear div isn’t necessary, you could remove it. If it is necessary for clearing floats, adjust its positioning.
Here’s a revised version of your HTML and CSS:
#results-summary-container {
border: 2px solid #e0e0e0;
box-shadow: 3px 4px 10px #585858;
width: 400px;
height: 180px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.9);
position: absolute;
top: 63%;
left: 10px;
color: black;
font-weight: bold;
text-align: center;
}
#results-summary-container h2 {
display: block;
width: 400px;
margin: 5px auto;
}
#results-summary-items {
display: flex;
justify-content: center;
margin: auto;
width: 260px; /* Increase width to fit three items */
}
.result-item {
opacity: 0;
display: inline-block;
margin-left: 10px;
margin-top: 20px;
width: 80px;
font-size: 30px;
border-radius: 10px;
font-weight: bolder;
text-align: center;
vertical-align: middle;
transition: opacity 1s ease-in;
}
#pnp-count {
background-color: #fca925;
}
#jlp-count {
background-color: #60ff2a;
}
#third-count {
background-color: #ff4d4d;
}<div id="results-summary-container">
Click on an electoral division for more detailed information.
<br>
<h2>Election Result Summary</h2>
<div id="results-summary-items">
<div class="result-item" id="jlp-count" title="JLP seat count">JLP</div>
<div class="result-item" id="pnp-count" title="PNP seat count">PNP</div>
<div class="result-item" id="third-count" title="Third seat count">Third</div>
</div>
</div>Key Changes:
Flexbox Layout: I used display: flex; on #results-summary-items to make sure all .result-item divs are aligned properly within the container.
Width Adjustment: Adjusted the width of #results-summary-items to accommodate three divs.
Removed clear div: Since flexbox handles alignment and layout well, the clear div is no longer necessary.
This should fix the layout issue and keep all divs inside the container.
Mohammed Agiba is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.