Question

I have a div-table that is working fine with about 4 columns but now I want to make the items expandable so that another div appears below the entry. The problem is that if I use another div below the table-row its width is getting stucked to the first columns-width.

What I need is a division that ignores the table-layout .. any GOOD solutions for this?

Answer 1

It looks like your final spanning div at the bottom is taking some strange inheritance from your divTable class. In your code, your final div is within the wrapper of divTable. I’ve amended your code slightly to have the div outside of the divTable div and it spans all columns.

<div class="navContent">
<div id="lastRequests" class="divTable">
<div class="divRow bold">
  <div class="divCell c1"> SiteID </div>
  <div class="divCell c2"> Ort </div>
  <div class="divCell c3"> Anfrage </div>
  <div class="divCell c4"> Ergebnis </div>
  <div class="divCell c5"> Datum </div>
</div>
<div class="divRow">
  <div class="divCell c1"> 56831-12481 </div>
  <div class="divCell c2"> gütersloh </div>
  <div class="divCell c3"> 332312, Bielefeld, <span class="tooltip" data-tooltip="Open.  Web. Business.">Deutscheland</span>, 80.32, 43.23</div>
  <div class="divCell c4"> Proxy </div>
  <div class="divCell c5"> 05.09.2012 20:20:21 </div>
</div>
</div>
<!-- move this div here -->
<div style="background-color: #0F9;">
This div should use the whole width
</div>
</div>

Edit: While this will work, I agree with everyone else above when they say you should really just use a table for this data instead of trying to replicate table functionality with divs.