Tina: Float Problem

Beitrag lesen

Konzentriere deinen Blick auf den Viewport, und auf #container.
(dem du zu diesem Zweck vielleicht mal einen Border gibst.)
Dann überlege dir das Verhalten dieses Containers bezüglich einem unbekannt dimensionierten Viewport. Denn in diesem Container prügeln sich deine Float Bereiche. Dein Float Anliegen ist da nämlich nur die halbe Antwort.

WEnn der Container ne Breite hat, werden die divs links und rechts immernoch am rechten Rand ausgerichted.
Wenn des Fenster kleiner als div id='container' wird, wird jetz einfach abgeschnitten.

<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
<style type="text/css">  
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }  
#container { width:1200px; min-height:20px; background:grey; text-align:left; border:3px solid black;}  
#rechts    { float:right;  w_idth:780px; background:yellow;}  
#links     { float:right;  width:380px; background:red; }  
#content   { color:#494949;  margin-left:4px; width:776px; overflow:hidden; min-height:700px; background:green; }  
#footer    { overflow:hidden; background:#587DBE; color:white; font-size:12px; height:17px; margin-left:10px; width:780px; text-align:right; }  
</style>  
<title>Floattest</title>  
</head>  
<body>  
<div id='container'>  
<div id='rechts'>  
  <div id='content'>  
    <p>Some Text rechts</p><p>Some Text rechts</p><p>Some Text rechts</p>  
  </div> <!-- content -->  
  <!-- <div id="footer">Footer</div> -->  
</div> <!-- rechts -->  
<div id='links'>  
  <p>Links</p><p>Links</p><p>Links</p><p>Links</p><p>Links</p>  
</div> <!-- links -->  
</div> <!-- container -->  
</body>  
</html>