Benedikt: float zerschießt mir mein Layout

Beitrag lesen

Hier mal ein Ausschnitt aus meinem kompletten Code:

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fragebogen</title>

<style>  
	body {  
		margin: 0;  
		background: #FFF;  
	}  
	  
	/\* Positioning Rules \*/  
	#container {  
		width: 900px;  
		margin: 0 auto;  
	}  
	  
	#titel {  
		position: relative;  
		height: 40px;  
		background: #999;  
		vertical-align: middle;  
		font: x-large h1, bold;  
	}  

	#subtitel {  
		position: relative;  
		height: 30px;  
		background: #CCC;  
		vertical-align: middle;  
		font: large h1, bold;  
	}  
	  
	#content {  
		position: relative;  
		padding: 20px 20px 60px 20px;  
		background: #fff;  
	}  
	  
	#left {  
		position: relative;  
		left: 0;  
		width: 50%;  
		background: #FFF;  
		float:left;  
				  
			  
	}  
	  
	#right {  
		position:relative;  
		left:50%;  
		right: 0;  
		width:50%;  
		background: #FFF;  
		float:left;  
	}  
	  
</style>  

</head>

<body>
<form action="fragebogen/auswertung.php" method="post">

<div id="container">
        <div id="titel">
         Erleben und Warnehmen von Natur und Landschaft
        </div>
        <div id="subtitel">
         Feldprotokoll zur Bewertung von Flüssen - Bächen
        </div>
        <br />

<div id="left">
         <b>Naturräumliche Einheit:</b><br />
            <input type="text" name="natureinheit" size="30" /> <br /><br />
            <b>Name des Fließgewässers:</b> <br />
            <input type="text" name="fließname" size="30"  /> <br /><br />
            <b>Kartierabschnitt:</b> <br />
            <input type="text" name="kabschnitt" size="30" /> <br /><br />
            <b>TK-Blatt:</b> <br />
            <input type="text" name="tkblatt" size="10" /> <br /><br />
        </div>
        <div id="right">
         <b>Bearbeiter/in:</b> <br />
            <input type="text" name"bearbeiter" size="30" /> <br /><br />
            <b>Datum:</b> <br />
            <input type="date" name="datum" /> <br /><br />
            <b>Uferseite:</b> <br />
            <select name="uferseite" size="1">
             <option>Bitte wählen</option>
                <option>linke Uferseite</option>
                <option>rechte Uferseite</option>
            </select>
         </div>
         <br />

<div id="titel" >
            1. Allgemeine Angaben
        </div>
        <div id="subtitel">
            1.1 Allgemeine Angaben - Lage des Fließgewässerabschnitts
        </div>
</div>
</form>
</body>
</html>

Ich weiß nicht, wo du meinst, dass ich <div style='clear: both'></div> einfügen soll.