float: 3 Bereiche hintereinander - 1 Bereich "säuft ab"

[Tante Busch]

Hi ihr,

ich weiß beim Floaten nicht mehr weiter, um das Folgende geht's:

Für eine Umfrage möchte ich je Zeile eine Aussage und einen Balken, mit dessen Hilfe der Gefragte seine Zustimmung von 1-10 angeben kann, darstellen. Der Balken enthält außerdem noch die Beschriftung "stimme überhaupt nicht zu" "stimme voll und ganz zu".

In etwa sieht eine Zeile der Umfrage dann so aus:

[Aussage xy: "stimme überhaupt nicht zu" ooooooOooo "stimme voll und ganz zu"]

Hier eine Beispiel-URI:

http://netvibration.com/floatProblem/index.php

Hier der Code:

:: HTML ::

<div id="HauptWrapper">      <!--hier sind alle Zeilen drin-->
    <div id="ZeilenWrapper"> <!--hier sind alle Zeilen-Elemente drin-->
        <div id="Aussage">
            1. Aussage xy:
        </div>
        <div id="BalkenMitMarkierungen">
            <div id="LinkeMarke">stimme überhaupt nicht zu</div>
     <div id="Balken">
         <ul id="Werte">
             <li><a href="index.php?q1=1"></a></li>
             <li><a href="index.php?q1=2"></a></li>
             <li><a href="index.php?q1=3"></a></li>
             <li><a href="index.php?q1=4"></a></li>
             <li><a href="index.php?q1=5"></a></li>
             <li><a href="index.php?q1=6"></a></li>
             <li><a href="index.php?q1=7"></a></li>
             <li><a href="index.php?q1=8"></a></li>
             <li><a href="index.php?q1=9"></a></li>
             <li><a href="index.php?q1=10"></a></li>
         </ul>
            </div>
            <div id="RechteMarke">stimme voll und ganz zu</div>
        </div>
    </div>
...
</div>
<...

:: CSS ::

* {
    padding:           0;
    margin:    0;
    color:    #000;
    text-align:           justify;
    font-family:           sans-serif;
}
#Balken {
    background-color:                 #EEE;
    height:    2em;
    width:    14em;
    padding:           0;
    margin:    0 0 0 22em;
}
#Werte {
    height:    2em;
    width:    14em;
    padding:           0.4em 0.1em 0.1em 0.4em;
}
li {
    list-style:           none;
    display:            inline;
    height:    1em;
    width:    1em;
}

a {
    background-color:                  #ccc;
    padding:           0.1em 0.5em;
    margin-right:          0.05em;
}
a:hover {
    padding:           0.5em;
    background-color:                 #F00;
    margin-right:          0.05em;
}

#Aussage {
 width:     10em;
 margin:    0;
 border:    0;
 float:    left;
}
#ZeilenWrapper {
 padding:   0.5em;
 border-color:          #DDD;
 border-style:          solid;
 border-width:          0.01em;
 width:    50em;
 height:    2em;
}

LinkeMarke {
 float:    left;
}

RechteMarke {
 padding:   0 0 0 30em;
 float:    right;
}

Ich hab hier im Forum gelesen und Tipps wie "div mit style:"clear: both; margin:0; height: 0; width:0; padding:0;"" schon probiert. Habe auch alles left floaten lassen, die rechte Markierung rechts floaten lassen, so dass sich der Balken zwischen die Markierungen einpassen sollte, divs gegen spans ausgetauscht und überhaupt...ich bekomme aber nie alles wirklich in eine Zeile, also so dass es vernünftig aussieht.

Ich hoffe ihr könnt mir weiterhelfen.

Gruss,

T

[Engelein]

Für eine Umfrage möchte ich je Zeile eine Aussage und einen Balken, mit dessen Hilfe der Gefragte seine Zustimmung von 1-10 angeben kann, darstellen. Der Balken enthält außerdem noch die Beschriftung "stimme überhaupt nicht zu" "stimme voll und ganz zu".

Also eine Tabelle.

In etwa sieht eine Zeile der Umfrage dann so aus:

[Aussage xy: "stimme überhaupt nicht zu" ooooooOooo "stimme voll und ganz zu"]

Ganz klar eine Tabelle.

<div id="HauptWrapper">      <!--hier sind alle Zeilen drin-->
    <div id="ZeilenWrapper"> <!--hier sind alle Zeilen-Elemente drin-->
        <div id="Aussage">
            1. Aussage xy:
        </div>
        <div id="BalkenMitMarkierungen">
            <div id="LinkeMarke">stimme überhaupt nicht zu</div>

Ganz klar eine <div>-Wüste. Pfuibäh ;-)

[suit]

Also eine Tabelle.
Ganz klar eine Tabelle.

nicht unbedingt - eine defintionsliste ist auch eine möglichkeit

term: ich bin ein hirnbluter
defintion: trifft zu
defintion: trifft weniger zu
defintion: trifft nicht zu

da dürfen sich jetzt die semantiker streiten

Ganz klar eine <div>-Wüste. Pfuibäh ;-)

jep, das sehe ich auch so

[Tante Busch]

Also eine Tabelle.
Ganz klar eine Tabelle.

nicht unbedingt - eine defintionsliste ist auch eine möglichkeit

term: ich bin ein hirnbluter
defintion: trifft zu
defintion: trifft weniger zu
defintion: trifft nicht zu

da dürfen sich jetzt die semantiker streiten

Ganz klar eine <div>-Wüste. Pfuibäh ;-)

jep, das sehe ich auch so

...aiaiai, Tabellen hatte ich irgendwie schon voll und ganz aus meinem HTML-Vokabular gestrichen (auch wenn ich weiß, daß die für tabellarische Daten noch "erlaubt" sind).

Vielen Dank Euch beiden... :-)

Bye

[at]

Hallo.

da dürfen sich jetzt die semantiker streiten

Das haben die längst getan.
MfG, at