DEKRA box on VIP 3rd tab

by Patrick Hund

HTML

<section id="modelDetails" class="zone">
  <header>
     <h2>Über dieses Modell</h2>

    <hr />
  </header>
  <article id="dekraInfo">
    <header>
       <h3>Gebrauchtwagenreport<br/><span class="disclaimer">bereitgestellt von DEKRA</span></h3>

    </header>
    <div class="headerBorder"></div>
    <div id="dekraInfoBody">
      <p>Im Rahmen der DEKRA Hauptuntersuchung werden Fahrzeugtypen beurteilt.
        Die Tabelle zeigt Stärken und Schwächen der geprüften Fahrzeugtypen, abweichend
        vom Durchschnitt aller untersuchten Fahrzeuge. (Fahrzeugtypen > 1000 Untersuchungen
        in zwei Jahren)</p>
      <form id="dekraInfoForm" name="dekraForm" action="http://localhost:8080/mobile-public-search-germany-webapp/auto-inserat/audi-a4-1-6-tombstone/23527.html?dekra=ajax"
      method="GET" data-form-autosubmit="#dekraType,#dekraMileage" data-form-target="#dekraInfo">
        <p>
          <label for="dekraType">Fahrzeugtyp</label>
          <select name="dekraGroupId" id="dekraType">
            <option value="audi-a4---cabrio-8e-,-8h" selected="selected">AUDI A4 / Cabrio Typ 8E , 8H</option>
            <option value="audi-a4-b8">AUDI A4 Typ B8</option>
          </select>
        </p>
        <p>
          <label for="dekraMileage">Fahrleistung</label>
          <select name="dekraId" id="dekraMileage">
            <option value="audi-a4---cabrio-8e-,-8h-km_0_to_50" selected="selected">0 – 50 tkm</option>
            <option value="audi-a4---cabrio-8e-,-8h-km_50_to_100">50 – 100 tkm</option>
            <option value="audi-a4---cabrio-8e-,-8h-km_100_to_150">100 – 150 tkm</option>
          </select>
        </p>
      </form>
      <table>
        <tbody>
          <tr>
            <td class="label">Fahrwerk, Lenkung</td>
            <td>
              <div title="Fahrzeug ist in dieser Baugruppe besser als der Durchschnitt"
              class="value rating-1">&nbsp;</div>
            </td>
          </tr>
          <tr>
            <td...

CSS

#dekraInfo {
  position: relative;
  width: 315px;
  height: 388px;
  float: left;
  background-color: pink;
  overflow: hidden;  
}

#dekraInfo header {
  position: absolute;
  top: 0;
  left: 0;
  width: 315px;
  height: 48px;
  background-color: yellow;
}

#dekraInfo footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 315px;
  height: 64px;
  background-color: teal;
}