Here is the HTML code snippet:
<div id="divMainFirst">
<div id="divInnerFirst">
<div id="divTitleHeaderUC">
<span id="spanTitleHeaderUC">Urgent Care Wait Time</span>
</div>
<div id="divSubTitleUC">
<div id="smallText" style="padding:0 5px; position: absolute; bottom: 1%; left: 0; right: 0; color: #000000; text-align: center;">If you are experiencing a life-threatening emergency, call 911 or go to your nearest emergency room. Do not go to the urgent care center.<br>Estimated wait times are provided for general information only, may change at any time, and may not reflect your actual wait time once you arrive.</div>
</div>
</div>
<div id="divInnerNext">
<div id="divTitleHeaderFD">
<span id="spanTitleHeaderFD">Find a Doctor</span>
</div>
<div id="divSubTitleFD">
<span style="width: 100%; text-align: center;">
<table cellpadding="5">
<tr>
<td class="alignLeft">By Name [<a href="physicians.aspx" class="blueLinks" title="View All Physicians">View All</a>]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
<tr>
<td class="alignLeft">By Specialty [<a href="medical_specialties.aspx" class="blueLinks" title="View All Specialties">View All</a>]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
<tr>
<td class="alignLeft">By Location [<a href="locations.aspx" class="blueLinks" title="View All Locations">View All</a>]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
</table>
</span>
</div>
</div>
</div>
This is my CSS code:
#divMainFirst {
display: block;
margin: 0 0 0 200px;
overflow: hidden;
}
#divInnerFirst {
display: inline-block;
margin: 0 0 0 100px;
height: 270px;
padding: 0;
width: 265px;
vertical-align: top;
}
#divInnerNext {
display: inline-block;
margin: 0 0 0 50px;
height: 270px;
width: 265px;
vertical-align: top;
}
#divTitleHeaderUC {
width: 265px;
height: 40px;
background-color: #FFFFFF;
text-align: center;
box-shadow: inset 0 0 10px rgba(245, 159, 36, 0.5);
position: relative;
}
#spanTitleHeaderUC {
width: 100%;
height: 40px;
line-height: 40px;
vertical-align: middle;
background-color: #FFFFFF;
font-family: 'blackjarregular';
font-size: 18pt;
color: #F59F24;
font-weight: bold;
}
#divSubTitleUC {
width: 265px;
height: 220px;
background-color: #FFFFFF;
text-align: center;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: #F59F24 0px 2px 3px;
-moz-box-shadow: #F59F24 0px 2px 3px;
box-shadow: #F59F24 0px 2px 3px;
position: relative;
}
When viewed in different screen sizes, it may appear differently than expected. The issue arises when the boxes do not adjust to fit the screen size properly. They overflow onto the next section below the first two.
How can I modify the code so that the boxes resize based on the zoom level or screen size?