Hey there, I've been working on creating a div to display information about both the Civilian and Vehicle that users input. Initially, everything worked perfectly with my HTML and CSS until I introduced two additional divs into the layout. With just one div, the design looks like this. However, adding the extra div causes it to appear differently, as shown in this image.
I'm confused about what's causing this issue. When I apply a background to the entire content, there's no white space between "Information:" and "Civilian:". Moreover, adjusting the width of the two divs to %49.99 while setting the display to inline-block results in the elements extending off-screen, as illustrated here.
Apologies if these seem like basic problems to fix within my HTML/CSS code. My knowledge in web development is limited, so I'm experimenting with jQuery to make some modifications. Below, you'll find the snippets from my HTML and CSS files:
HTML:
<div id="civinfo">
<h1>Information</h1>
<!-- CIV SIDE -->
<div>
<h2>Civilian: </h2>
<span><h3>Name: </h3><p id="civname">None, None</p></span>
<span><h3>Warrant: </h3><p id="civwarrant">None</p></span>
<span><h3>Citations: </h3><p id="civcit">None</p></span>
</div>
<!-- VEH SIDE -->
<div>
<h2>Vehicle: </h2>
<span><h3>Plate: </h3><p id="vehplate">None</p></span>
<span><h3>Stolen: </h3><p id="vehstolen">None</p></span>
<span><h3>Registered: </h3><p id="vehregi">None</p></span>
<span><h3>Insured: </h3><p id="vehinsured">None</p></span>
</div>
</div>
CSS:
#civinfo {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
background: #000000;
width: 35%;
height: 30%;
display: none;
font-family: 'Lato', sans-serif;
color: white;
border-radius: 10px;
}
#civinfo h1 {
text-align: center;
font-size: 35px;
margin: 8px;
}
#civinfo div {
margin: 0;
padding: 0;
display: inline-block !important;
width: 45%;
height: auto !important;
}
#civinfo div h2 {
text-align: center;
margin: 0 5px;
font-weight: 400;
font-size: 20px;
}
#civinfo div h3 {
display: inherit;
font-weight: 400;
margin: 0 10px;
}
#civinfo div span {
display: inline-block;
margin: 0;
padding: 0;
margin-bottom: 5px;
width: 75%;
height: auto;
}
#civinfo div p {
float: center;
text-align: center;
display: inherit;
padding: 5px 15px;
background: #bbbbbb;
color: black;
border-radius: 25px;
font-size: 16px;
}