To labels med fork. dim. hvordan fanger jeg dem ?

Hej

Er der nogen som gider hjælpe mig med et lille CSS problem ?

Sagen er den at jeg har fire bokse, hvoraf de tre har samme dimension og nu er mit, at jeg ikke kan "fange" den sidste boks i min <div>, som holder sammen på det hele, tre af mine <label>'s har en størrelse, men mit <label>'en, hvor mit <textarea> er har en anden dimension - lidt kode kunne måske hjælpe:

 <div id="form_container">
                 <form>
                     <label>
                         <span>Fornavn:</span>
                         <input type="text" name="firstname"/>
                     </label>
                     <label>
                         <span>Email:</span>
                         <input type="text" name="firstname"/>
                     </label>
                     <label>
                         <span>Telefon:</span>
                         <input type="text" name="firstname"/>
                     </label>
                     <label>
                         <span>Besked:</span>
                         <textarea></textarea>
                     </label>
                 </form>
             </div>

og her er den CSS'en:

 #form_container {
     
     width: 770px;
     min-height: 200px;
     height: auto;
     float: left;
      border: 1px green solid;
 }
 
 #form_container label{
     display:block;
     width: 650px;
     height: 60px;
     float: left;
     margin-bottom: 35px;
     font-family: verdana;
     font-size: 16px;
     border: 1px red solid;
 }
 
 #form_container label span{
     float: left;
     width: 100px;
     padding-top: 20px;
 }
 
 #form_container label input{
     width: 500px;
     height: 60px;
     border-radius: 5px;
     border: 1px solid #DBDBDB;
     float: right;
 }
 
 #form_container label textarea {
     
     resize: none;
     width: 500px;
     height: 220px;
     border-radius: 5px;
     border: 1px solid #DBDBDB;
     float: right; 
     
     
 }

Jeg har sat border på kasserne, så det er nemmere for jer, at hvad problemet er !

JsFiddle

EDIT:

Jeg har måske ikke fået forklare mig ordentlig, så jeg prøver igen !

Kasserne er konstrueret ved at give <label> nogle dimensioner - jeg "rammer" <label> tagget ved at "dykke ned" i #form_container label

Dette virker rigtig godt

Problemet er, at jeg har en <label> hvor jeg har et <textarea>, som ikke har de samme dimensioner som de 3 andre <label>'er.

Der hvor mit problem opstår er, når jeg forsøger at lave en separat style for den <label>, hvor <textarea> ligger i - det er det jeg ikke kan finde ud af !

Jeg har prøvet at give <label>'en et ID, men det virker ikke, da den bliver ved med, at tage dimensionerne fra #form_container label (den indeholder jo også selv en <label> !).

Hvis jeg selv kunne bestemme, så havde jeg lavet formen med nogle <div>'er med class="" og id="" og så havde den ikke være længere, men det må jeg ikke (for min lærer !) - better do as the teacher says !

Metoden er også ganske brugbar (må jeg erkende), men læren glemte bare lige, at fortælle, hvad jeg skulle gøre i det "sjældne" tilfælde, hvor felterne i formularen ikke er lige store (aaarrrggghhhhh).

Til de (få ?) af jer der undre sig over, at man bruger et <label> i stedet for et <div>, så skulle forklaringen være, at det semantisk er mere korrekt at gøre det således.

EDIT#2

Så skulle problemet være løst

I min HTML tilføjede jeg et id til den sidste <label> i linje 15, så den nu ser således ud:

 <label id="label_style">
     <span>Besked:</span>
     <textarea></textarea>
 </label>

og i min CSS lavede jeg en ny regel:

 label#label_style {
     
     display:block;
     width: 650px;
     height: 230px;
     float: left;
     margin-bottom: 35px;
     font-family: verdana;
     font-size: 16px;
     
 }

Så nu sku' den ged være barberet