Tina: zweispaltiges Formular

Beitrag lesen

für ein zweispaltiges Formular habe ich den code unten gebaut, klappt ganz gut.
was ich nicht hinbekomme.

  • Ab einer bestimten Fensterbreite, soll die zweite Spalte unter der ersten kommen (das Label 'bild' bleibt rechts stehen)
  • wenn das Fenster kleiner wird, werden die Label umbrochen.
    Kann man hinbekommen, dass die inputfelder dann kleiner werden?
<!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 .spalte1 { float:left; margin: 10px; padding-right:10px; border-right:1px solid black; width:60%; max-width:540px;}  
form .spalte2 { margin: 10px;}  
form .formfooter { clear:both; margin: 10px; }  
</style>  
</head>  
<body>  
<form action='#'>  
<div class="spalte1">  
  <label for="f1">F1:</label><br/>  
  <input type="text" id="f1" name="f1" size="50"/><br/>  
  <label for="f2">F2:</label><br/>  
  <input type="text" id="f2" name="f2"  size="10" /><br/>  
  <label for="f3">F3:</label><br/>  
  <textarea name="f3" id ='f3' cols="60" rows="5"></textarea><br/>  
  <label for="f4">F4:</label><br/>  
  <input type="text" id="f4" name="f4" size="40" /><br/>  
  <label for="f5">F5:</label><br/>  
  <input type="text" id="f5" name="f5" size="40" /><br/>  
</div>  
  
<div class="spalte2">  
  <label for='bild'>Bild:</label><br/>  
  <input name="bild" id='bild' type="file" size="50" maxlength="100000" accept="text/*"/><br/>  
  <img src='nologo.gif' alt='alt'/><br/>  
  <label for="f11">F11:</label><br/>  
  <input type="text" id="f11" name="f11" size="40" /><br/>  
  <label for="f12">F12:</label><br/>  
  <input type="text" id="f12" name="f12" size="40" /><br/>  
</div>  
  
<div class="formfooter ">  
  <hr/>  
  <input type="submit" value="absenden" name="ok" />  
</div>  
</form>  
</body>  
</html>