productlisting für online shop ohne tabelle via div lösen

hallo,

ich versuche gerade das produktlising eines online shops so umzubauen, dass die tabellen rausfliegen und das ganze via div läuft.

es sollen immer zwei produkte nebeneinander dargestellt werden und dann in die teife, nach dem motto

produkt 1 | produkt 2
produkt 3 | produkt 4
produkt 5 | produkt 6
....

ich habe mit divs bisher 0 erfahrung und habe schon viele tutorials hinter mir. leider bin ich hängen geblieben mit diesem code hier:

<style type="text/css">
  div#table {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 250px;
	float:left;
	left: 0;
    padding: 0.5em;
    border: 2px ridge silver;
  }
</style>
<br /><br />
<div id="table">Produkt 1</div>
<div id="table">Produkt 2</div>
<br /><br />
<div id="table">Produkt 3</div>
<div id="table">Produkt 4</div>

Dieser Code stellt leider die Produkte nicht untereinander wie es sein soll.

Ich denke mal eine Lösung dieses Problems wird nicht mein ganzes Problem lösen. Ziel ist es diesen Tabellenmüll irgendwie als div zu bauen:

<table width="750" border="1">
  <tr>
    <td>Produkt 1<br />
      <table width="300" border="1">
        <tr>
          <td>bild</td>
          <td>text</td>
        </tr>
      </table>
    Text 1<br /></td>
    <td>Produkt 2<br />
        <table width="300" border="1">
          <tr>
            <td>bild</td>
            <td>text</td>
          </tr>
        </table>
      Text 1<br />
    <br /></td>
  </tr>
  <tr>
    <td>Produkt 3<br />
      <table width="300" border="1">
        <tr>
          <td>bild</td>
          <td>text</td>
        </tr>
      </table>
    Text 3<br />
    <br /></td>
    <td>Produkt 4<br />
      <table width="300" border="1">
        <tr>
          <td>bild</td>
          <td>text</td>
        </tr>
      </table>
    Text 4<br /></td>
  </tr>
</table>

Ich weiß nur, dass es oft mit browsern probleme gibt. wobei ich nur das html tabellenframework irgendwie via div darstellen will. wobei die die produkte auf der zeile immer wagerecht sind, d.h. so:

produkt 1 | produkt 2
produkt 3 | produkt 4
produkt 5 | produkt 6

und nicht so (falls ein produkt mal etwas mehr platz braucht)

Kann man mein Problem einfach lösen? Ich habe wohl in nem Forum folgendes gelesen:

"Gibt es nicht auch eine Möglichkeit, das zweite Element "automatisch" unterhalb des ersten anzeigen zu lassen, ohne spezifische Angaben zu Position zu machen?

indem du sie in ein umgebendes div packst und dieses absolut positionierst, die inneren divs aber nicht."

amidala

schmidt-webdesign.net

Grundsätzlich bieten sich Tabellen für Daten an, die tabellarisch vorliegen (wie deine). Aber das bringt dich bei deinem Problem nicht wirklich weiter ...

Versuch's also mal so (Formatierung und Breite müssen deinen Wünschen angepasst werden):

Das StyleSheet:

<style type="text/css"> 
<!-- 
.liste p { 
margin:0; 
font-size:13px; 
} 
.liste p b { 
float:left; 
width:150px; 
margin-left:11px; 
font-weight:normal; 
} 
--> 
</style>

Der HTML-Code:

<div class="liste"> 
<p><b>Produkt1</b>Produkt2</p> 
<p><b>Produkt1</b>Produkt2</p> 
</div>