Display a div element between a group of list items without altering the HTML (to keep it semantic)

Question

I have a list of products, except the blue-colored one.

The blue is an information block from the company which is not related at all to the product listed.

So logically, to keep it semantic, I'm writing it like this.

<ul>
    <li> <!-- product goes here --> </li>
    <li> <!-- product goes here --> </li>
    <li> <!-- product goes here --> </li>
    <li> <!-- product goes here --> </li>
    <li> <!-- product goes here --> </li>
</ul>
<div> <!-- the blue colored box here --> </div>

However with this arrangement, the blue-colored box will be displayed after the products, while the design requires me to put it between the products.

Is it possible to do this design semantically, without doing crazy stuff like using position: absolute?

Answer 1

Yes its possible just add float: right to div and place div before ul in HTML

ul, li, body, html{
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
li {
  width: 33.33%;
  border: 1px solid black;
  height: 100px;
  float: left;
}
div {
  width: 33.33%;
  border: 1px solid black;
  height: 100px;
  background: blue;
  float: right;
}

<div> <!-- the blue colored box here --> </div>
<ul>
    <li> <!-- product goes here --> </li>
    <li> <!-- product goes here --> </li>
    <li> <!-- product goes here --> </li>
    <li> <!-- product goes here --> </li>
    <li> <!-- product goes here --> </li>
</ul>