mrx: Design in CSS umsetzen

Beitrag lesen

Okay, ich hab es jetzt nochmals versucht - bzw. ich bin dabei das Ganze ohne absolute Positionierung zu machen. Dabei ist jedoch ein Problem aufgetreten: Wie schaffe ich es nun, dass das Mittelteil sich soweit ausdehnt, dass das rechte Elememt 30 Pixel vom rechten Rand weg ist. Trotz der Angabe der 30 Pixel margin-right funktioniert das nicht. Was kann ich dagegen tun?

http://vfb-stuttgart.piranho.de/test/

  
<?xml version="1.0" encoding="ISO-8859-1" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
<title>Startseite</title>  
  
  
  
  
<style type="text/css">  
  <!--  
body {  
	background-color:#ffa200;  
}  
  
  
#mainlo1 {  
	float:left;  
	margin-left:250px;  
	margin-top:50px;  
	height:20px;  
	width:10px;  
	background-image:url("bild/lo1.png");  
}  
  
#mainlo2 {  
	float:left;  
	margin-left:0px;  
	margin-top:50px;  
	height:20px;  
	width:10px;  
	background-image:url("bild/lo2.png");  
}  
  
#maino {  
	float:left;  
	margin-left:0px;  
	margin-right:0px;  
	margin-top:50px;  
	height:20px;  
	background-image:url("bild/o.png");  
}  
  
#mainro1 {  
	float:left;  
	margin-left:0px;  
	margin-top:50px;  
	height:20px;  
	width:10px;  
	background-image:url("bild/ro1.png");  
}  
  
#mainro2 {  
	float:left;  
	margin-right:30px;  
	margin-top:50px;  
	height:20px;  
	width:30px;  
	background-image:url("bild/ro2.png");  
}  
  
   -->  
 </style>  
  
  
<div id="mainlo1"></div>  
<div id="mainlo2"></div>  
<div id="maino"></div>  
<div id="mainro1"></div>  
<div id="mainro2"></div>  
  
  
  
  
  
</head>  
<body>  
  
  
</body>  
</html>