positionierung klappt nicht

[bofh]

hallo zusammen,

habe hier diese zwei div-elemente, die eigentlich nur nebeneinander stehen sollen - wie eine tabelle mit 2 spalten:

#menu {
float: left;
padding-left: 0em;
padding-right: 0em;
padding-top: 1.5em;
width: 200px;
background-color: White;
}

#contents {
border-left: 1px dashed #B7B7B7;
padding: 1.5em;
height: 500px;
text-align: left;
margin: 10px;
background-color: White;
margin-left: 0px;
}

html:

<div id="menu">
navigation und logo hier
</div>

<div id="contents">
hier der inhalt: texte, bilder, formulare...
</div>

das funktioniert auch, solange der inhalt in menu groesser (laenger) ist als der inhalt in contents - ansonsten fliesst contents unter menue weiter. ausserdem bricht der text in contents nicht automatisch um - wenn die saetze laenger sind wird content wohl auf 100% ausgedehnt und immer unter menue gesetzt, der platz echts neben menue bleib leer.
was mache ich falsch?

[Zeromancer]

Hallo bofh,

was mache ich falsch?

schon mal probiert dem Content-Div ein margin-left von der Breite des ersten Divs zu geben (evtl. zzgl. Abstand zum linken Div - 210px ...)?

#menu {
  width:200px;
  float:left;
  padding:1.5em 0 0 0;
  background:#fff;
}

#content {
  margin-left:200px;
  border-left: 1px dashed #B7B7B7;
  padding: 1.5em;
  height: 500px;
  text-align: left;
  background: #fff;
}

<div id="menu">Text</div>
<div id="content">Text</div>

Um welchen Browser und welches OS handelt es sich eigentlich?

Mit freundlichen Grüßen

André

[wahsaga]

hi,

das funktioniert auch, solange der inhalt in menu groesser (laenger) ist als der inhalt in contents - ansonsten fliesst contents unter menue weiter.

dann gibt #contents ein entsprechende margin-left.

ausserdem bricht der text in contents nicht automatisch um - wenn die saetze laenger sind wird content wohl auf 100% ausgedehnt und immer unter menue gesetzt, der platz echts neben menue bleib leer.
was mache ich falsch?

ohne ausführlicheres beispiel schwer zu sagen.

gruß,
wahsaga

[Gernot Back]

Hallo bofh,

habe hier diese zwei div-elemente, die eigentlich nur nebeneinander stehen sollen - wie eine tabelle mit 2 spalten:

das funktioniert auch, solange der inhalt in menu groesser (laenger) ist als der inhalt in contents - ansonsten fliesst contents unter menue weiter. ausserdem bricht der text in contents nicht automatisch um - wenn die saetze laenger sind wird content wohl auf 100% ausgedehnt und immer unter menue gesetzt, der platz echts neben menue bleib leer.

was mache ich falsch?

Gib deinem Menü doch eine Höhe von 100%! Dafür musst du natürlich sicherstellen, dass auch alle Elternelemente deines Menüs eine Höhenangabe haben, damit das Menü-Element weiß, worauf es sich mit seinere 100-prozentigen Höhe beziehen soll, also sowas hier:

html, body {
  height:100%;
  margin:0;
  padding:0;
}

#menu {
float: left;
width: 200px;

height:100%;

}

Damit in einigen Browsern nicht unnötige Scrollbalken entstehen, weil zu der 100% Größe des Body- und/oder HTML-Elementes noch Default-Werte für den Innen- und Außenabstand hinzukommen, setzt du deren Padding und Margin auf 0.

So definiert kann kein Content mehr unter das Seitenmenü rutschen.

Gruß Gernot

[Zeromancer]

Hallo Gernot, hallo bofh,

Damit in einigen Browsern nicht unnötige Scrollbalken entstehen,

weitere Hilfestellung zu diesem Thema findet man auch im Artikel von elya.

Mit freundlichen Grüßen

André

[MudGuard]

Hi,

Gib deinem Menü doch eine Höhe von 100%! Dafür musst du natürlich sicherstellen, dass auch alle Elternelemente deines Menüs eine Höhenangabe haben, damit das Menü-Element weiß, worauf es sich mit seinere 100-prozentigen Höhe beziehen soll, also sowas hier:

Damit ist das Menü so hoch wie der Viewport (sprich: der Anzeigebereich des Browsers).

Ist content aber höher als der Viewport, wird bei Deiner Methode immer noch der content unter das Menü fließen.
Nur daß der Effekt erst bei Überschreiten der Viewport-Höhe eintritt, nicht schon vorher.

margin-left funktioniert unabhängig von der Höhe des Menüs.
Soll der linke Streifen (in dem das Menü sitzt) auf der gesamten Seitenhöhe eine andere "Hintergrundfarbe haben, kann man auch mit border-left arbeiten …

cu,
Andreas

[Gernot Back]

Hallo Andreas,

Ist content aber höher als der Viewport, wird bei Deiner Methode immer noch der content unter das Menü fließen.
Nur daß der Effekt erst bei Überschreiten der Viewport-Höhe eintritt, nicht schon vorher.

margin-left funktioniert unabhängig von der Höhe des Menüs.
Soll der linke Streifen (in dem das Menü sitzt) auf der gesamten Seitenhöhe eine andere "Hintergrundfarbe haben, kann man auch mit border-left arbeiten …

Du hast Recht, danke!

Ich habe jetzt mal ein bisschen mit Margin experimentiert, um dessen Bedeutung bei gefloateten und nicht gefloateten Elementen zu verstehen. Ich dachte ja bisher, dass das keinen Unterschied mache, aber weit gefehlt:

Während die Außenabstände von gefloateten Elementen sich zu den Außenabständen gefloateter Geschwisterelemente hinzuaddieren, scheinen die von nicht-gefloateten Blockelementen mit denjenigen ihrer geloateten Geschwister zusammenzufallen (IE) oder sich dann sogar auf das Elternelement zu beziehen (Mozilla) oder sogar gleichzeitig beides (Opera).

Auf die unterschiedliche Darstellung des folgenden Quellcodes in den von mir getesteten Browsern (Mozilla 1.7.2, Opera 7.54, IE 6.0, jeweils unter Win98) mache ich mir dennoch keinen richtigen Reim:

Vorübergehend auch hier zu sehen.

Welcher Browser stellt es denn nun eigentlich dem Standard entsprechend dar?

Warum steht der Text meiner nicht gefloateten Boxen bei Opera nicht innerhalb der entsprechnden Rahmen und im Falle von Mozilla darüber hinaus sogar offensichtlich zweimal an derselben Stelle?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Margintest</title>
<style type="text/css">
<!--
* {
  font-family:sans-serif;
  font-size:14px;
}

html, body {
  margin:0;
  padding:0;
}

.floatblock {
  margin:50px;
  float:left;
  height:50px;
  width:50px;
  border:solid 1px #00CC00;
  padding:2px;
}

.pureblock {
  margin:50px;
  height:50px;
  width:50px;
  border:solid 1px #CC0000;
  padding:2px;
}
-->
</style>
</head>
<body>
   <div class="floatblock">float block</div>
   <div class="pureblock">pure block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="floatblock">float block</div>
   <div class="pureblock">pure block</div>
   <div class="floatblock">float block</div>
</body>
</html>

Kann mir das jemand erklären?

Gruß Gernot