probleem met 2 forms op 1 rij te krijgen mbv <div> en <span>

[rob3rt]

Ik wil 2 verschillende formulieren op 1 lijn krijgen (zonder tables, tr, td etc), echter wat ik ook probeer de 2 formulieren staan telkens op een andere rij/regel

Wat ik probeer/wil is:

HTML:

<div>
    <span> <?PHP echo $formulier1; ?></span>
    <span> <?PHP echo ?formulier2; ?></span>
</div>

Uiteraard zijn de waardes $formulier1 en $formulier2 een volledig werkend formulier (in php), beide formulieren hebben 1 text input veld met daarnaasr 1 submit knop wat naast het invoer veld staat, zoiets als:
xxxxxxxxxxxxxxSUBMIT1 (waarbij de xxx hier het invoer veld weergeven)

Wat er nu gebeurd is dat formulier op 1 regel staat en het 2de eronder, het ziet er telkens zo uit:
xxxxxxxxxxxxxxxxxSUBMIT1
xxxxxxxxxxxxxxxxxSUBMIT2

wat de bedoeling is is echter zo:
xxxxxxxxxxxxxxxxxSUBMIT1 xxxxxxxxxxxxxxxxSUBMIT2

Ik heb al style parameters meegegeven in de div en span zoals
text-align:left; right valign:top; display:inline; etc
Ook heb ik alles binnen enkel 1 div en 1 span of alleen een div of alleen een span geprobeert, maar wat ik ook doe niks schijnt te werken en de 2 invoer velden blijven op 2 regels.

Het enige wat wel werkt is als ik alle code binnen 1 <form> </form> actie zet, echter dit kan weer niet daar het hier om 2 compleet verschillende formulier actions gaat die elk ook naar een volledig verschillende locatie dienen te verwijzen, tevnes worden beide formulier via php vooraf apart gegenereerd.

Iemand een tip hoe dit op te lossen zonder dat ik nu tables moet gaan gebruiken?

[ieperlingetje]

post eens je relevante html en css code. Verder is het <form> element ook een block element.

[jeroenikke]

maak van die span divs (zoals hierboven: form is een block element)
dan kan je die divs naast elkaar zetten op verschillende manieren:

- float 1 div links of rechts
- display: inline-block
- absoluut positioneren

en zo zijn er misschien nog wel methodes. Hangt af van hoe die forms in het groter geheel passen.

[rob3rt]

wat ontbreekt er aan volgens jou?

Het is niet meer dan een <form action= method= name= > <input type=text name= > <input type=submit name= > </form>
Daarnaast de div en de span zoals ik al had gepost, niks meer dan dat, verder css is er niet aanwezig.

[Tarilo]

Zoals al gezegd is het form element een block-level element. Dit betekent o.a. dat het niet op dezelfde 'regel' zal staan als andere block-level elementen.

De in mijn ogen makkelijkste manier om dit op te lossen is door allebei de form elementen te floaten. Een gefloat element neemt echter geen ruimte in de layout in en de div rekt dus niet netjes mee. Dit is op te lossen door de div in zijn css overflow: hidden mee te geven.

Dan heb je ook je span elementen niet meer nodig.

Zie voorbeeld: jsFiddle

[Wary87]

Zoals hierboven al is aangegeven kan je dit het beste oplossen met floats. Als de forms dan niet netjes naast elkaar staan kan het zijn dat ze teveel ruimte in nemen. Dan zou ik met firebug controleren of input/label elementen in het form een vaste width hebben of de forms zelf wel de juiste width hebben om naast elkaar te passen.