Wrapping Table Content Around A Floating Div Across Multiple Rows

Part-way down my page I have a table with two columns and multiple rows, each containing varying amounts of dynamically generated text. I would like to float a div (of fixed size)

Solution 1:

I don't believe that would be a correct usage of table element. To solve your problem it will be better to use div or p elements. If you float right the red element, those that follow will wrap around it. If you want to use table you may consider using third column or position absolute div next to the table.

p {
  margin: 0;
  padding: 10px;
}
#wrapper {
  width: 500px;
}
.row {
  position: relative;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
}
.row:last-child {
  border-bottom: 2px solid #000;
}
#tablep:first-child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  padding: 2%;
  border-right: 2px solid #000;
}
#tablep:nth-child(2) {
  margin: 00024%;
  width: 71%;
}
#rightColumn {
  border: 2px solid #000;
  position: relative;
  z-index: 1;
  float: right;
  background: #ff0000;
  width: 20%;
  margin: 002px2px;
}

<divid="wrapper"><divid="rightColumn"><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p></div><divid="table"><divclass="row"><p>text text text</p><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text</p></div><divclass="row"><p>text text text</p><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text</p></div><divclass="row"><p>text text text</p><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text</p></div><divclass="row"><p>text text text</p><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text</p></div><divclass="row"><p>text text text</p><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text</p></div></div></div>