As I work on my website, I encountered an issue with a div containing a table. The div expands to full width, but when I resize the screen, it shrinks causing the content to overlap.
I am looking for a solution where the minimum width of the div adjusts based on the content within the table. The main div has a class of "search". You can find the relevant code snippets in the following link:
.search {
border: 2px solid #FDBF3B;
background-color: #FFEBC1;
padding: 10px;
margin: 5px 0;
}
.search table {
border: none;
}
.search .header {
margin-bottom: 5px;
border-bottom: 1px solid #FDBF3B;
padding-bottom: 2px;
color: #000F1F;
font-weight: bold;
overflow: hidden;
}
.search .buttons {
margin-top: 5px;
border-top: 1px solid #FDBF3B;
padding-top: 8px;
white-space: nowrap;
}
.inner {
padding: 7px;
min-height: 480px;
z-index: 1;
overflow: auto;
}<DIV class=inner>
<DIV class=search sizset="false" sizcache017720493147691946="40 33 1">
<DIV class=header>Search Options </DIV>
<TABLE sizset="false" sizcache017720493147691946="40 33 1">
<TBODY sizset="false" sizcache017720493147691946="40 33 1">
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_NAME>Name:</SPAN>
</TD>
<TD>
<INPUT name=NAME style="BACKGROUND-COLOR: #ffffff" type=text size=15 maxLength=10 data-dpmaxz-eid="4">
</TD>
</TR>
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_ADDRESS>Address:</SPAN>
</TD>
<TD>
<INPUT name=ADDRESS style="BACKGROUND-COLOR: #ffffff" type=text size=40 maxLength=50 data-dpmaxz-eid="5"> </TD>
</TR>
</TBODY>
</TABLE>
<DIV class=buttons>
<INPUT name=SEARCH class=BUTTON type=button value=Search>
<INPUT name=SEARCH class=BUTTON type=button value=Clear>
<INPUT name=CREATE class=BUTTON type=button value=Create> </DIV>
</DIV>
</DIV>