Tina: zweispaltiges Formular

Beitrag lesen

ein paar Sachen korrigiert, das Problem bleibt aber, dass die Labels nicht umbrechen.

<!DOCTYPE html  
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<title>TEST</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
<style type="text/css">  
form { width: 100%;  min-width: 300px; background-color:silver;}  
fieldset { float: left; border: none; }  
  fieldset.spalte1 { margin: 10px; padding-right:10px; border-right:1px solid black; min-width:200px;}  
  fieldset.spalte2 { margin: 10px; min-width:300px;}  
  fieldset label {color:red; min-width:200px; display: block;}  
  fieldset img {display: block;}  
  fieldset input {display: block;}  
form .formfooter { clear:both; margin: 10px; }  
</style>  
</head>  
<body>  
<form action='#'>  
<fieldset class="spalte1">  
    <label for="f1">F1 lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung :</label>  
    <input type="text" id="f1" name="f1" size="50"/>  
</fieldset>  
  
<fieldset class="spalte2">  
  
    <label for='bild'>Bild trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala tralla:</label>  
    <input name="bild" id='bild' type="file" size="50" maxlength="100000" accept="text/*"/>  
    <img src='/images/nologo.gif' alt='alt'/>  
    <label for="f11">F11:</label>  
    <input type="text" id="f11" name="f11" size="40" />  
</fieldset>  
  
<div class="formfooter ">  
  <hr/>  
  <input type="submit" value="absenden" name="ok" />  
</div>  
</form>  
</body>  
</html>