Albert: DIV Boxen nebeneinander?!

So folgendes problem ich sitze nun schon seit mehreren stunden an meinem div basierten layout für eine aktionsseite.
Sie soll folgendermaßen aussehen:
In einer "zeile" befinden sich immer 2 Aktionen, in einer Aktion befindet sich links ein bild und rechts daneben ist eine Beschreibung sowie unterhalb zwei kästchen mit altem preis und neuem preis.

in Opera und IE7 werden zumindest die aktionen so angezeigt wie es sollte (auch nicht nebeneinander) aber im Firefox ist alles untereinander!

achja die box in der das ganze gezwängt wird hat 780px width und 490px height was aber nicht das problem sein sollte.

hier mal der css code:

/* CSS Document */
<!-- beinhaltet zwei aktionen ist eine zeile -->
#zeile {
 width:780px;
 height:110px;
 margin:0px;
 padding:0px;
}
<!-- ist der schwarze rahmen um eine box links-->
#aktionborderlinks {
 float:left;
 width:390px;
 height:110px;
 margin:0px;
 padding:0px;
 background-color:#000000;
}
<!-- ist der schwarze rahmen um eine box rechts-->
#aktionborderrechts {
 float:right;
 width:390px;
 height:110px;
 margin:0px;
 padding:0px;
 background-color:#000000;
}
<!-- ist eine Aktion -->
#aktion {
 width:388px;
 height:108px;
 margin:1px;
 padding:0px;
 background-color:#FFFFFF;
}
<!-- hier kommt ein Bild des Produktes rein -->
#bild {
 float:left;
 width:108px;
 height:108px;
 margin:0px;
 padding:0px;
}
<!-- Ist die Box neben dem Produktbild -->
#aktionstext {
 float:right;
 width:280px;
 height:108px;
 margin:0px;
 padding:0px;
}
<!-- Der Produktname sowie die Beschreibung des Produkts kommen hier rein  -->
#beschreibung {
 width:280px;
 height:78px;
 margin:0px;
 padding:0px;
}
<!-- hier sind die beiden preisboxen enthalten -->
#preis{
 width:280px;
 height:30px;
 padding:0px;
 margin:0px;
}
<!-- der standartpreis -->
#preisalt {
 float:left;
 width:140px;
 height:30px;
 padding:0px;
 margin:0px;
 background-color:#333333;
}
<!-- der aktionspreis -->
#preisneu {
 float:right;
 width:140px;
 height:30px;
 padding:0px;
 margin:0px;
 background-color:#333333;
}

und der HTML code dazu:

<h1>Aktionen</h1>
    <div id="wichtig">G&uuml;ltig vom 1.1.2008 bis 31.12.2008.</div>
    <div id="zeile">
     <div id="aktionborderlinks">
      <div id="aktion">
       <div id="bild">
        <img src="./Images/rinne.jpg" />
       </div>
       <div id="aktionstext">
        <div id="beschreibung">
         Rinnenk&ouml;rper V 200 mit Drainlock&copy; aus Polymerbeton, mit integriertem Kantenschutz, mit ACO DRAIN Sicherheitsfalz (SF), für        flüssigkeitsdichte Verlegung
        </div>
        <div id="preis">
         <div id="preisalt">
          St&uuml;ck<br />
          statt 89,90 &euro;
         </div>
         <div id="preisneu">
          79,90 &euro;
         </div>
        </div>
       </div>
      </div>
     </div>
     <div id="aktionborderrechts">
      <div id="aktion">
       <div id="bild">
        <img src="./Images/rost.jpg" />
       </div>
       <div id="aktionstext">
        <div id="beschreibung">
         Abdeckroste mit Drainlock&copy; für Rinnenkörper und Einlaufkasten V 100
        </div>
        <div id="preis">
         <div id="preisalt">
          St&uuml;ck<br />
          statt 29,90 &euro;
         </div>
         <div id="preisneu">
          25,90 &euro;
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>

  1. Hi,

    in Opera und IE7 werden zumindest die aktionen so angezeigt wie es sollte (auch nicht nebeneinander) aber im Firefox ist alles untereinander!

    ja, die vielen Bugs insbesondere des IE sind berüchtigt. Opera versucht traditionell, sie nachzubilden. So kommt es, dass beide von diesem Selektor:

    <!-- beinhaltet zwei aktionen ist eine zeile --> #zeile {

    nur einen Bruchteil sehen. Firefox erkennt ihn natürlich vollständig, er sieht korrekt, dass er ihn nicht interpretieren kann (einige Teile des Selektors sind ihm nicht bekannt - sie sind schließlich auch invalide), und reagiert auf die definierte Art: er ignoriert die Regel.

    Was soll der Selektor eigentlich bewirken? Es gibt in CSS weder "<" noch "!" oder "-", und mindestens in HTML gibt es auch kein <beinhaltet>-Element, oder <zwei>, <aktionen>, <ist>, <eine> oder <zeile>.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      DU BIST MEIN RETTER!

      War Wochenlang der Überzeugung das man in CSS mithilfe von <!-- --> kommentiert! dabei geht das mit /* */ so wie in C....
      Es sieht jetzt genau so aus wie ich es haben wollte :) gut habs mir auch schon aufgezeichnet durchgerechnet etc. DANKE NOCHMAL! für die aufklärung dieses sehr dummen Fehlers der mir einige Stunden gekostet hat!

      mfg

      1. Hi,

        War Wochenlang der Überzeugung das man in CSS mithilfe von <!-- --> kommentiert! dabei geht das mit /* */ so wie in C....

        Quote 231 sinngemäß: Wochenlanges Probieren erspart 10 Minuten Nachlesen im Standard ...

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.