Formular float Problem

[egolive]

Hallo Community,

um mein Problem darzustellen habe ich einen Screenshot gemacht der ganz gut beschreibt was los ist.

http://rapidshare.com/files/4251922113/float_fehler.png

Wie man auf dem Screenshot sieht, steht das restliche Formular unter der rechten Box.

Nach meinem Verständnis müsste das Formular ganz normal links neben der Box stehen.

Hier mal mein Code:

   <hr class="clear-l" style="color: #21467a; height: 1px; width: 1000px;" />

                <div class="reihe">
                    <span class="label">Kreditbetrag</span>
                    <asp:TextBox Width="128px" ID="tbKreditbetrag" runat="server" CssClass="left tbWertINPleft"
                        Style="display: block" onblur="this.value = calltbValidation(this.value, 0, 2, true, 'tbKreditbetrag')"></asp:TextBox>
                    <span class="label_euro">Euro</span>
                </div>

                <div id="[COLOR=#ff0000][B]hilfeBoxStatus[/B][/COLOR]" style="display:block;float:left;padding-left:650px;position:relative;">
                    <div style="background-image: url(../img/HilfeBoxPuffer.png);background-repeat:repeat-x; width:328px; height:21px;"></div>
                    <div style="background-color:#ffffff; border-color:#212c57; border-bottom-width:1px; border-left-width:1px; border-right-width:1px; border-top-width:0px; border-style:solid; width:326px; height:420px;"></div>
                </div>

                <div class="reihe">
                    <span class="label">
                        <input type="checkbox" id="cbBearbeitungsgebuehr" class="left" onclick="enableDisableBearbeitungsgebuehr('cbBearbeitungsgebuehr', 'tbBearbeitungsgebuehr', 'rbBearbeitungsgebuehrEinrechnen', 'rbBearbeitungsgebuehrSeparat');" value="Enable/Disable" />
                        Bearbeitungsgebühr
                    </span>
                    <asp:TextBox Width="128px" ID="tbBearbeitungsgebuehr" runat="server" CssClass="left tbWertINPleftDisable"
                        Enabled="false" onblur="this.value = calltbValidation(this.value, 0, 2, true, 'tbBearbeitungsgebuehr')"></asp:TextBox>
                    <span class="label_euro">Euro</span>
                    <div class="clear-l" style="height: 5px;">
                    </div>
                    <asp:RadioButton ID="rbBearbeitungsgebuehrEinrechnen" runat="server" Text="in die Rückzahlungsrate einrechnen" class="rbleft" GroupName="Bearbeitungsgebuehr" Enabled="false" Checked="true" />
                    <div class="clear-l"></div>
                    <asp:RadioButton ID="rbBearbeitungsgebuehrSeparat" runat="server" Text="separat zu zahlen" class="rbleft" GroupName="Bearbeitungsgebuehr" Enabled="false" />
                </div>

                <div class="reihe">
                    <span class="label">Zinssatz</span>
                    <asp:TextBox Width="128px" ID="tbZinssatz" runat="server" CssClass="left tbWertINPleft"
                        Style="display: block;" onblur="disableFehlerhinweis('tbZinssatz');"></asp:TextBox>
                    <telerik:RadComboBox Width="140px" ID="rcbZinssatz" runat="server" Skin="Web20" CssClass="left ddlisten"
                        AutoPostBack="false" CloseDropDownOnBlur="true" Filter="Contains" ForeColor="#212c57"
                        MarkFirstMatch="true">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="% p.a. nominal" Value="1" />
                            <telerik:RadComboBoxItem runat="server" Text="% p.a. effektiv" Value="2" />
                        </Items>
                    </telerik:RadComboBox>
                </div>
...

Das ist die rechte Box: hilfeBoxStatus

/*Formular Ausrichtung*/
.frmText { font-family: Verdana, Helvetica, sans-serif; font-size: 11px; font-weight: Normal; color: #000000; }

.left { float: left; margin-left: 5px; }
.clear-l { clear: left; }

.reihe {
  clear: both;
  padding: 2px 0px;
  margin-top:25px;
  margin-bottom:25px;
}

.label {
  float: left;
  width: 200px;
  text-align: right;
  padding-top: 3px;
  padding-right: 10px;
  margin-left:23px;
}

.label_topic {
  float: left;
  width: 200px;
  text-align: right;
  padding-top: 3px;
  padding-right: 10px;
  margin-left:23px;
}

.label_euro {
  float: left;
  text-align: left;
  padding-top: 3px;
  padding-left: 5px;
}

.rbleft {
    padding-left: 233px; 
}

Was mach ich falsch?

Ich hoffe ihr könnt mit dem Code was anfangen und mir helfen :)

Vielen dank schon mal fürs lesen!

Gruß,
danny

 

[bdt600]

Ein Link zur Seite wäre besser als der gepostete Quellcode

 

[egolive]

Die Seite ist leider nicht Online verfügbar und ich hab auch keine Möglichkeit sie Online verfügbar zu machen.
Was fehlt dir? Ich kann gerne den ganzen Quellcode posten. :/

 

[bdt600]

Ich kann gerne den ganzen Quellcode posten. :/

Das hilft uns auch nicht wirklich weiter. Wenn man sich das mit dem Firefox mit dem Addon Firebug ansehen kann, findet man das Problem deutlich einfacher. Du kannst die Seite ja zur Not bei einem Freehoster ablegen.

 

[egolive]

Das Problem ist, hinter der von mir erstellten Seite steht ein großes CMS System welches man nicht einfach auf ein Freehoster laden kann ^^ Das von mir erstelle Formular ist nur ein kleiner Teil davon.
Ich kann die Seite leider auch nicht aus dem Projekt lösen, da diese viele Ressourcen des gesamten Projekts verwendet und somit das Ergebnis verfälscht wäre.

Also, ich nehme an das man mir so nicht weiterhelfen kann? :/

 

[Tronjer]

Dann vereinfache das Script. Um dein Problem zu lösen, brauchst du weder Eventhandler noch Inline-CSS. Das macht es sowohl für dich als auch für uns unübersichtlich.

Zwei Elemente werden ordnungsgemäß nebeneinander platziert, wenn:
- das HTML-Grundgerüst valide ist
- sie untereinander stehen
- gefloatet sind
- nicht mit position:absolute platziert wurden
- und die Breite des Elternelements groß genug ist