hawkmaster: 4 spaltiges Layout mit fixen Werten, Vorgehensweise?

Beitrag lesen

Hallo zusammen,
Seit gestern versuche ich nach und nach meine Tabellen mit CSS zu ersetzen.
Dank der Hilfe hier habe ich meine Hauptnavigation nun schon mit CSS und Listen (ul, il) umgesetzt.

An einigen Stellen im Projekt gibt es Tabellen wie:

  
<table width="700">  
  <tr>  
    <td width="150">Textfeld1<br />  
      <input type="text" name="textfield" /></td>  
    <td width="50">Textfeld2<br />  
      <input type="text" name="textfield2" /></td>  
    <td width="160">Auswahl1<br />  
        <select name="select">  
    </select>  
    </td>  
    <td width="320">Platz für Button oder weitere Tabelle </td>  
  </tr>  
</table>  

Bevor ich mir nun was falsches bzw. umständliches angewöhne, möchte ich euch Experten fragen wie ihr dies mit CSS machen würdet.

Könnte man hier nun mit 4 divs arbeiten, etwa:
<div id="spalte1"></div>
<div id="spalte2"></div>
<div id="spalte3"></div>
<div id="spalte4"></div>

und dann mit position und width (bzw. mit festen Werten:
#spalte1 {
position: absolute;
left: 2%;
width: 18%;
}

#spalte2 {
position: absolute;
left: 21%;
width: 39%;
}

#spalte3 {
position: absolute;
left: 61%;
width: 18%;
}

#spalte4 {
position: absolute;
left: 80%;
width: 17%;
}

Oder wäre das Ganze einfacher wieder mit Listen und float zu machen?
Mir geht es unter anderem auch das die Beschriftung wie in der Tabelle ÜBER den Elementen liegt und das die Breiten der Spalten in etwa so sind wie in der Tabelle.

Bin für jeden Hinweis dankbar.

vielen Dank und viele Grüße
hawk