div, CSS - Fehler in der Darstellung :(

skokes

Hallo!

Ich versuche, meine HTML-Seite mit div-Tags zu verschönern. Dabei bin ich aber auf ein kleines Problem gestoßen. Beispiel: http://rafb.net/p/5To4g792.txt

Leider bewirkt dieser Quelltext nicht ganz das, was ich mir vorstellte. Die 'Blaue Box' (letztes div) sollte als eine Art Fußzeile unter den beiden Oberen Boxen angezeigt werden.

Wenn ich das über den Firefox abrufe, überlappen die grauen Boxen die blaue. Wie bekomme ich das hin, dass diese, als Fußzeile beabsichtigte, blaue Box erst dort beginnt, wo die beiden grauen Boxen enden?

Danke schon mal für jede Art von Hilfe!
skokes

jojo87

Auch für dich lautet die Lösung: Wrapper-div.
Wurde gerade erst hier beschrieben.

gruß,
Jojo

yeti66

skokes,

HTML

<!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>Unbenanntes Dokument</title>
<style type="text/css">
<!--
* {margin: 0;padding: 0;}
body {background: #1c2023;font-family: "trebuchet ms", verdana, arial, sans-serif;font-size: 100.01%;text-align:center;}
#wrapper {width:960px;margin: 0 auto;}
#linkeBox {float:left;width:475px;background-color:#cecece;color: #555555;margin-right:10px;}
#rechteBox {float:right;width:475px;background-color:#cecece;color: #555555;}
#footer {clear:both;width:100%;background-color:#0000ff;color:#ffffff;text-align:center;}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="linkeBox"> diese beiden boxen sollen


    zwischen den beiden zeilen


    stehen, diese aber nicht


    ber&uuml;hren!


  </div>
  <div id="rechteBox"> dies ist die zweite box


    sie wird neben der ersten


    box stehen und ragt ebenfalls


    in die untere untere div-box hinein!


  </div>
  <div id="footer"> dies ist die untere blaue box, die sich mit den beiden
    grauen ueberschneidet! :( </div>
</div>
</body>
</html>

Alles anzeigen

...so etwa?

Tags

Benutzer online in diesem Thema