展開DIV超出父項列表項目

我有一個有序列表，它實際上是一個頁面上的產品顯示。在關閉列表項之前，在每個列表項（li）內有一些內容，其後是包含更多內容的div。展開DIV超出父項列表項目

我需要爲每個列表項目中的div擴展（其寬度）超出其父項列表項目，並實際填充有序列表的寬度（ol）。每個div也需要直接位於其父項列表項下方並向下推任何以下列表項。

我知道可能沒有意義，這不是很容易解釋。

這裏的HTML我到目前爲止：

<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>

這裏是我的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; 
}

這裏的名單，可能會幫助它做一個毫無意義的線框： wireframe of list