Expand DIV beyond parent List Item - html

Question

I have an ordered list which is actually a display of products on a page. Within each list item (li) there is some content followed by a div containing some more content, before closing the list item.
I need for the div within each list item to expand (its width) beyond its parent list item and actually fill the width of the ordered list (ol). Each div also needs to sit directly below its parent list item and push any following list items down.
I know the probably doesn't make sense, it's not very easy to explain.
Here's the HTML I have so far:
<ol class="products group">
<li>
<a href="#">
<img src="assets/img/ind-aerospace.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-automotive.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
<!-- Expand this -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
</div>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
Here's my CSS:
ol.products {
position: relative;
}
ol.products li {
list-style: none;
float: left;
width: 30%;
margin: 0 3% 1.5em 0;
border-bottom: dotted 1px #ed2124;
border-bottom: dotted 1px rgba(237,33,36,.5);
}
ol.products li p {
margin: .5em 0;
min-height: 140px;
line-height: 1.2em;
}
ol.products li div {
position: relative;
width: 100%;
border: solid 1px red;
}
ol.products li div p {
min-height: 0;
}
Here's a wireframe of the list that might help it make a little sense:

Answer 1

You should use jQuery to accomplish this. You can add a "expandable" class to each of the info boxes and in the css have it display:none; then when you click on the parent info button use jQuery to position the box as you need it to (and return the display to visible, add animation, fade, etc). You will need to have jQuery traverse your html and place the info box in the correct area.

Answer 2

I tried something similar with css hover states, you can see my results here:
CSS Popouts
It's similar because I have a nested div that's set to display:none by default and is set to display:block by a hover anywhere on the list item.
The div floats overtop the other content though, rather than pushing it out of the way like your wireframes seem to indicate. You might have to get some JS going for you like #JohnP and #Collin White mentioned.