How to resize based on zoom or screensize - html

Question

My HTML code:
<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 [View All]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
<tr>
<td class="alignLeft">By Specialty [View All]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
<tr>
<td class="alignLeft">By Location [View All]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
</table>
</span>
</div>
</div>
</div>
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;
}
With the above HTML and CSS code, It displays the following zoomed in and by default:
But when I view it in different size screen it changes to this:
As you can see the size of the box hasn't changed and not shrunk to fit all three boxes instead it overflows on to the next section below the first two and cannot be seen.
How can I modify so boxes changes based on the zoom in/screen size?

Answer 1

Have a look into #media queries within your CSS.
With media queries, you can set break points to change the CSS doing things such as hiding certain elements when they're no longer required for the device they're being used on.
Have a look at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
That will give you a much more in-depth explanation behind the queries and how to use them effectively.

Answer 2

use percentages for everything. or #media (min-width: 768px) {}