Container unterinander positionieren

[Tommy57]

Hallo,

ein Framework erstellt ein Formular, dass ich mittels CSS positionieren will.
Das Formular ist wie folgt aufgebaut und lässt keine Änderung zu:

Label_1, Formularfeld_1, Label_2, Formularfeld_2, Label_3, Formularfeld_3 usw.

Nun möchte ich, dass jeweils Label_1 und Formularfeld_1 untereinander liegen und Label_2 und Formularfeld_2 direkt rechts daneben liegt. Wie kann ich mit CSS machen, dass 2 Elemente untereinader liegen und dann die folgenden 2 Element rechts daneben liegen.

Ziel ist:

Labe_1.................Label_2................Label_3
Formularfeld_1.....Formularfeld_2.....Formularfeld_3

Gruß

 

[hoctar]

CSS:

.wrapper {
    float: left;
    width: 200px;
    border: 1px solid #ccc;
}

.wrapper label {
    display: block;
}

HTML:

    <div class="wrapper">
        <label>Label_1</label>
        <input name="" value="" />
    </div>
    
    <div class="wrapper">
        <label>Label_2</label>
        <input name="" value="" />
    </div>
    
    <div class="wrapper">
        <label>Label_3</label>
        <input name="" value="" />
    </div>

 

[Tommy57]

Danke hoctar,

aber das Problem ist ja eben, dass ich keine weiteren Container hinzufügen kann. Daher ist es mir nicht möglich, deinen Wrapper-Container zu erzeugen.

Das Framework generiert das komplette Formular automatisch und da liegen alle Elemente parallel zueinander.

 

[containerhüter]

Ohne dies wirst du kein mehrspaltiges Layout bewerkstelligen, es sei denn, du bedienst dich der absoluten Positionierung aller einzelnen beteiligten Elemente innerhalb des Formulars.

Btw, wo ein <label>, das gruppierende <fieldset> ist eigentlich nicht weit von ihm entfernt, und würde hier hoctars empfohlenen <div class="wrapper">-Suppenauflauf in ein semantisch wohlgeformtes Markup wandeln ;-)

http://de.selfhtml.org/html/formulare/strukturieren.htm#gruppieren

 

[Tommy57]

Danke für die Hilfe. Also dann werd ich es wohl oder übel mit Positionierung lösen müssen. Den generierten Code an der Stelle zu ändern ist nicht möglich, da ich an einem Projekt mit arbeite und mir das Formularobjekt genauso übergeben wird. Echt ärgerlich, aber ich muss meinen CSS-Code an die Seite anpassen und nicht die Seite an meinen Code, bin nicht der Erste der bei denen total verzweifelt da dran sitzt.