M Ansyori M Ansyori - 6 months ago 11
HTML Question

Make <div></div> floating inside table tr and td

Well hello everyone, so I've done some coding and make me able to do autocomplete on php page. But unfortunately, When I typed something into the textbox.

it does show what I need but the table getting weird as shown :
Weird Table

I wanted to make the (customized with css) became floating, like this :
Correct element I wanted

Can anybody help me with this? I'm not pretty good at css, so here's the code :



#material-list {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 190px;
}
#material-list li {
padding: 10px;
background: #FAFAFA;
border-bottom: #F0F0F0 1px solid;
}
#material-list li:hover {
background: #F0F0F0;
}
#search-box {
padding: 10px;
border: #F0F0F0 1px solid;
}

<table>
<tr>
<td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Material Code</strong></font>
</td>
<td class="td-data_1">
<div class="frmSearch">
<input type="text" id="material_code" placeholder="Enter Material Name" style="font-size:13px; width: 215 " />
<div id="suggesstion-box"></div>
</div>
</td>
</tr>
</table>





Any help would be much appreciated.
Thank You.

Answer

set #suggestion-box in absolute position, so it doesn't interact within the flow of the page

#material-list {
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 190px;
}
#material-list li {
  padding: 10px;
  background: #FAFAFA;
  border-bottom: #F0F0F0 1px solid;
}
#material-list li:hover {
  background: #F0F0F0;
}
#search-box {
  padding: 10px;
  border: #F0F0F0 1px solid;
}
#suggesstion-box {position:absolute;
<table>
  <tr>
    <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Material Code</strong></font>
    </td>
    <td class="td-data_1">
      <div class="frmSearch">
        <input type="text" id="material_code" placeholder="Enter Material Name" style="font-size:13px; width: 215 " />
        <div id="suggesstion-box">whatever<br/>whatever </div>
      </div>
    </td>
  </tr>
</table>

Comments