css layout zeilenumbruch erzwingen

phenix

Ich baue gerade an einer Webseite. (hab hier mal das Problem einfach dargestellt)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>...</title>
<style type="text/css">
<!--
#left, #right
{
   width:170px;
   border:1px solid #000000;
}
#left
{
   float:left;
}
#right
{
   float:right;
}
//-->
</style>

</head>
<body>
<div id="left"></div>
<div style="float:left;">
Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text.
</div>
<div id="right"></div>

</body>
</html>

Mein problem ist jetzt, dass wenn der Text im content Bereich zu gross ist wird die rechte Navigation nach unten verschoben
Wie verhindere ich das?

- Die Webseite soll sich der Fensterbreite anpassen, deswegen keine Breite beim content Bereich
- Und die rechte und linke Navigation muessen 170px sein!

Hat jemand eine loesung?

Gruss

Linnea

ändere mal die Reihenfolge deiner Elemente

<body> 
<div id="left"></div> 
[b]<div id="right"></div>[/b]
<div style="float:left;"> 
Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. Zu langer Text. 
</div> 
</body>

phenix

Ja das mit der Reihenfolge funktioniert im IE weil der nicht richtig css kann...
Aber in anderen Browsern wie Firefox oder Opera geht das nicht.

Hat jemand vielleicht noch eine andere Idee? (ohne Tabellenmissbrauch )

Linnea

bei mir funktioniert das auch in Opera, Firefox und Netscape
allerdings solltest du das

<div style="float:left;">

weglassen und stattdessen einfach

<div>

schreiben

phenix

ah ok
jetzt funktioniert es
thx