Navigationsleiste und float:left

[opi]

Hallo,

kann mir wer weiterhelfen? Ich habe ein Div-Element als linke
Navigationsleiste.

  
#navigation {  
   width:12em;  
   margin:1em 1em 0 1em;  
   text-align:left;  
   float:left;  
}  
  
#navigation ul {  
   list-style:none;  
   margin:0; padding:0;  
}  
  
#navigation li {  
   margin:0.4em;  
}  
  
#navigation li a {  
   text-decoration:none;  
   color:#3A3C69;  
}  
  
#navigation li a:hover {  
   text-decoration:underline;  
}  
  
#navigation span {  
   font-size:0.8em;  
   font-weight:bold;  
}  

Nun fließt der Text auch so weit um das Element herum, aber wie kann
ich es erreichen, dass der Text und alle weiteren Elemente bis zum
Ende der Seite auf gleicher Höhe bleiben?

So ist es im Moment:

----- Text
|   | Text
|   | Text
----- Text
Text
Text

Aber ich hätte es gerne so:

----- Text
|   | Text
|   | Text
----- Text
      Text
      Text

Kann ich das Div-Element für die Navigationsleiste so definieren,
dass es immer bis zum Ende der Seite reicht, auch wenn man Scrollen
muss? Oder muss ich ein weiteres Div-Element (right:0;) für den
gesamten weiteren Inhalt der Seite erstellen? Also so ...

+-------------+
| DIV  HEADER |
+-------------+
+---++--------+
| D ||        |
| I ||        |
| V ||  DIV   |
|   ||        |
| N || INHALT |
| A ||        |
| V ||        |
+---+|        |
|    |        |
|    |        |
+----+--------+

Und wäre eine Tabelle deprecated - wie man so schön sagt?

Mir ist noch aufgefallen, dass sich andere Elemente, wie zum Beispiel
Div's, sich nicht ganz richtig verhalten. Wenn ich ein Div-Element
und eine Tabelle mit einer Weitenangabe von 60% definiere, dann
befinden sie sich horizontal nicht auf gleicher Höhe.

-----  ------------
|   |  | DIV 60%  |
|   |  ------------
|   |
|   |  -----------------
|   |  | TABLE 60%     |
|   |  -----------------
-----

Ist das ein Bug (IE 5.5)? Mit Opera und Firefox klappt das und die
Elemente werden horizontal auf gleicher Höhe angezeigt, also so ...

-----  -----------------
|   |  | DIV 60%       |
|   |  -----------------
|   |
|   |  -----------------
|   |  | TABLE 60%     |
|   |  -----------------
-----

Greez,
opi

[Zeromancer]

Hallo opi,

kann mir wer weiterhelfen? Ich habe ein Div-Element als linke
Navigationsleiste.

Brauchst du nicht!

#navigation {

Besser:
 ul#navigation  {

list-style:none;

padding:0;
     width:12em;
     margin:1em 1em 0 1em;
     text-align:left;
     float:left;

}

div#inhalt {
   margin-left:breite_deiner_navigationsliste_oder_ein_bisschen_mehr;

}

  
  
<ul id="navigation">  
....  
</ul>  
  
<div id="inhalt">  
.....  
</div>  
  
 Mit freundlichen Grüßen,  
André

[opi]

Hallo,

div#inhalt {
   margin-left:breite_deiner_navigationsliste_oder_ein_bisschen_mehr;

Ok. Sowas dachte ich mir schon.

Gibt es denn auch so etwas wie "height:*", so dass das Element bis
zum Ende des Elternelements reicht?

Greez,
opi

[jeanlucpicard]

Gibt es denn auch so etwas wie "height:*", so dass das Element bis
zum Ende des Elternelements reicht?

In absolut positionierten Elementen kann man die obere Kante mit "top" und die untere mit "bottom" angeben. Setzt man "bottom:0;", reicht das Elemet genau bis zum Ende.
Funktioniert allerdings nicht im IE (nur mit einem expression()-Workaround) und nicht richtig im Opera.
Ich hatte nämlich dieses Problem: https://forum.selfhtml.org/?t=120571&m=774325