[css] Waarom <label> float left?

[IschaGast]

Ben de laatste tijd nogal aan het klooien met css en op zich gaat het wel redelijk alleen nu zit ik met een vraagje waar ik het antwoord nog nergens heb kunnen vinden.

Stel ik heb een formulier met bijvoorbeeld het volgende:

Cascading Stylesheet:

label {
    float: left;
    width: 111px;
}

span {
    float: left;
    width: 111px;
}

div.radiobuttons label {
   float: none;
}

HTML:

<form action="reactie.asp">
    <fieldset>
        <legend>[css] Waarom float left?</legend>
        <div class="naam">
            <label for="naam">Naam</label>
            <input type="text" name="naam" id="naam" />
        </div>
        <div class="radiobuttons">
            <span>Geslacht</span>
            <input type="radio" name="geslacht" id="m" value="M" />
            <label for="m">Man</label>
            <input type="radio" name="geslacht" id="v" value="V" />
            <label for="v">Vrouw</label>
        </div>
        <div>
            <label for="geboortedatum">Geboortedatum</label>
            <input type="text" name="geboortedatum" id="geboortedatum" />
        </div>
    </fieldset>
</form>

Dit zier er dus goed uit in Internet Explorer 6 en in de nieuwste opera alleen in FireFox ziet het er niet uit. Dit heb ik kunnen oplossen d.m.v. een class toe te voegen aan de eerste div:

Cascading Stylesheet:

div.naam label {
   float: left;
}

Nu zijn er echter een paar dingen die ik niet helemaal begrijp:

• Waarom moet je float: left; doen een <label> is geen block element dus het inputveld staat zowiezo naast de text?
• Waarom pakt hij pas een width als ik float left doe bij het label?
•
• Waarom moet ik nog deze code toevoegen om het geheel ook in FireFoz werkende te krijgen?

Cascading Stylesheet:

div.naam label {
   float: left;
}

Ik weet dat mijn voorbeeld werkt maar om het geheel allemaal wat beter te begrijpen wil ik ook graag weten waarom iets werkt zoals het werkt. Dan kan ik de volgende keer de oplossing misschien zelf helemaal bedenken.

[Verwijderd]

quote: http://www.w3.org/TR/2004.../visuren.html#dis-pos-flo

Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

Waar dan weer staat dat 'inline', 'block' wordt. Het voordeel is echter dat het LABEL element nog steeds naast het INPUT element zit waardoor het "hetzelfde" lijkt. (Uiteraard wil je liever 'display:inline-block' of 'display:table-cell' gebruiken, maar IE wordt nog ondersteund.)

[Verwijderd]

voor inline elementen kan je ook geen width definieren, voor float elementen wel (en voor inline-block en table-cell, maar zoals Anne al zei heb je daar niets aan). Zie verder ook je andere topic over hoe ik in het algemeen de HTML structuur van formulieren bouw, de css kan je dan naar je eigen smaak aanpassen

[IschaGast]

Het blijt een heel raar iets wat ik heb want in mijn originele document wil het nog steeds niet helemaal werken, hoe en waarom dat weet ik niet.

Wat ik heb is 2 kolommen met aan de linker en rechterkant een fieldset met ongeveer hetzelfde qua velden. Haal ik nu alle <div> elementen uit de linker fieldset dan werkt alles prima in FireFox en anders niet.

Nu heb ik het opgelost met:

Cascading Stylesheet:

div.radiobuttons label {
   float: none;
    display: inline;
}