Floated Element still triggering Mouse Over, despite Clearfix

Question

I have a table of information that I built using an unordered list containing floated . Each Float has been clearfixed, but the floated element is extending beyond the unordered list itself, stretching the tag across the page and managing to trigger mouseovers far beyond the table itself. What is the proper way to kill the floats so they essentially display:none when beyond my element ??

here is the html code

#sortable_list{

  list-style: none;
  margin: 0;
  padding: 0;
  font:12px Arial Helvitica Geneva sans-serif;
}
#sortable_list li.header div{
  background-color:orange;
  font-weight:bold;
  cursor:default;
}
#sortable_list li div{
  display:block;
  float:left;

  border-right:1px solid #000;
  padding:3px 5px;
}
.border_bottom_1px{border-bottom:1px solid #000;}
.border_bottom_2px{border-bottom:2px solid #000;}

#sortable_list li div.listitem_mesh{width:150px; border-left:1px solid #000;}
#sortable_list li div.listitem_wire_diameter_inches{width:150px;}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

a:hover li.listitem div {background-color:#e0e0e0;}

Welded Wire Mesh
<ul id="sortable_list" style="margin-left:auto; margin-right:auto;">
  <!-- Header -->
  <li class="header clearfix">
    <div class="listitem_mesh">Mesh (Inches)</div>
    <div class="listitem_wire_diameter_inches">Wire Diameter (Inches)</div>
  </li>


  <!-- Items -->

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_1px">4 x 4</div>
      <div class="listitem_wire_diameter_inches border_bottom_1px">.255</div>
    </li>
  </a>

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_1px">4 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_1px">.135</div>
    </li>
  </a>

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">4 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li>
  </a> 

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_1px">4 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_1px">.1055</div>
    </li>
  </a>

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_1px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_1px">.080</div>
    </li>
  </a>

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.250</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.1875</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.135</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1.5 x 1.5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li> 
  </a>


  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.1875</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.135</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.092</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1.5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.162</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x .75</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x .75</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x .75</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x .75</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.047</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.625 x .625</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.041</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.047</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.041</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.035</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x .5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2.5 x 2.5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2.5 x 2.5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.047</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.048</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.047</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.041</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.032</div>
    </li> 
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">4 x 4</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.032</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">4 x 4</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.028</div>
    </li> 
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">4 x 4</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.025</div>
    </li> 
  </a>


</ul>

The HTML is invalid. `ul` List element cannot contain anything other than list items `li` as child. Also, the `
` itself is a block-level box, in order to shrink its width to the content, you could change the `display` to `inline-block`. — Hashem Qolami, Jun 16 '15 at 04:34
This does look like a job for ``, poor thing is undervalued for its proper use these days :( — misterManSam, Jun 16 '15 at 05:32
[Here is a simple table if you want an easy solution](http://jsbin.com/napado/edit?html,css,output):) — misterManSam, Jun 16 '15 at 05:44

Floated Element still triggering Mouse Over, despite Clearfix

0 Answers0