DIVs nebeneinander

[snorri]

Hej!

OK, das ist wahrscheinlich eine Anfängerfrage für CSS-Designer, aber ich habe bisher mit Tabellen gelayoutet, und der Umstieg ist nicht ganz leicht ...

Also, ich brauche eine Seite mit zwei Bereichen: ein Menü mit 200 Pixeln Breite links sowie einen Inhalselement, der den gesamten Rest der Breite einnehmen soll. Wenn ich das nun so mache:

<div style="width:200px; float:left; background-color:#FF0000">Menü-Div</div>

<div style="width:100%; float:left; background-color:#00FF00">Inhalts-Div Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</div>

dann stehen die DIVs aber untereinander, nicht nebeneinander (weil die 100% des Inhalts-DIVs sich anscheinend auf die Bildschirmbreite bezieht, nicht auf die zur Verfügung stehende Breite).

Wenn ich "width:100%; float:left;" im zweiten DIV weglasse, fängt der Text zwar oben an, fließt dann aber unter dem Menü-DIV um das Menü herum.

Wenn ich verbotenerweise die "width:100%;" weglasse, geht es zwar im IE, aber ich will es in allen Browsern zum Funktionieren bringen.

Habt Ihr einen Tipp für mich?

-- snorri

[pebbo]

Du kannst nicht absolute und relative Breitenangaben verwenden. Entweder links 200px und rechts 460px oder so, oder einfach 20% und 80% oder so ;)

[snorri]

Hej!

Du kannst nicht absolute und relative Breitenangaben verwenden. Entweder links 200px und rechts 460px oder so, oder einfach 20% und 80% oder so ;)

Ist das wirklich so? Dann breche ich nämlich die CSS-Design-Experimente ab und kehre reumütig in den Schoß des Layouttabellen-Designs zurück, wo so etwas wichtiges problemlos geht ...

-- snorri

[Alex Fechner]

Sowas ist absolut unwichtig. du kannst alles mit den divs machen. musst halt drauf achten, dass die prozentangaben zusammen im 100 ergeben. du kannst aber auch ein div definieren mit width:100px und neben dran ein div style="width:30%;" machen. das müsste zwar nciht funktionieren, aber bei mir klappt es. ansonsten empfehl ich dir auch wieder aufs table format zurück zu gehen. mach ich auch noch, versteh auch nciht warum sich alle daggen so sträuben. ich mach halt nur eine tabelle und verschachtel sie auch nciht sondern mach das innenleben mit divs.... und valide ist das auch laut w3.org.

gruß
alex

Hej!

Du kannst nicht absolute und relative Breitenangaben verwenden. Entweder links 200px und rechts 460px oder so, oder einfach 20% und 80% oder so ;)

Ist das wirklich so? Dann breche ich nämlich die CSS-Design-Experimente ab und kehre reumütig in den Schoß des Layouttabellen-Designs zurück, wo so etwas wichtiges problemlos geht ...

-- snorri

[Zeromancer]

Hallo snorri,

Habt Ihr einen Tipp für mich?

das Inhalts-Div baucht ein margin-right von größer/gleich der Breite des Navi-Divs.

Analog dazu kannst du dem Inhalts-Div auch einen Rahmen von der Breite größer/gleich dem Navi-Div geben

div#left {
  width:200px;
  float:left;
}

div#content {
  margin-right:200px;
}

oder

div#content {
  border-right: solid 200px #f00;
}

Mit freundlichen Grüßen

André

[TG]

Dieser Beitrag war auf jeden Fall schon sehr hilfreich zur Geslatung der Navigation.

Aber was mache ich wenn ich den GESAMTEN übrigen Anzeigebereich abdecken möchte.
Bsp.: Naviagtion sind 200px, und unabhängig von der Fensterbreite möchte ich 100% von der restlichen Bildschirmfläche für den Inhalt verwenden.

Mit Tabellen hätte ich das so gemacht:

<table width="100%">
<tr>
<td width="200">Navigation</td>
<td>Inhalt</td>
</tr>
</table>

Aber wie mache ich das mit div???

[Zeromancer]

Hallo,

Dieser Beitrag war auf jeden Fall schon sehr hilfreich zur Geslatung der Navigation.

Danke, freut mich zu hören.

Aber was mache ich wenn ich den GESAMTEN übrigen Anzeigebereich abdecken möchte.
Bsp.: Naviagtion sind 200px, und unabhängig von der Fensterbreite möchte ich 100% von der restlichen Bildschirmfläche für den Inhalt verwenden.

Ein Div erstreckt sich wie alle Blockelemente erst einmal über die gesamte Breite und passt sich dann dem Inhalt entsprechend in der Höhe an (Theorie).

Somit füllt das Inhalts-Div nach dem floaten 100% der zur Verfügung stehenden Breite aus.

100% Höhe erreichst du, indem du deinen Bereich mit Inhalten füllst oder mal diesen Thread im Archiv durchforstest. Auch andere Fragestellungen zu diesem Thema findest du dort.

Mit freundlichen Grüßen

André

[TG]

Somit füllt das Inhalts-Div nach dem floaten 100% der zur Verfügung stehenden Breite aus.

Wenn ich für das Inhalts-div width:100% definiere, richtet sich das jedoch nicht nach der zur Verfügung stehenden Breite, sondern nach der allgemeinen Fensterbreite (so verhält sich zumindest der IE).

Resultat aufgrund der linksstehenden Navigation: ich muss nach Rechts scrollen um alles zu sehen, was nicht erwünscht ist.

[Zeromancer]

Hallo,

Somit füllt das Inhalts-Div nach dem floaten 100% der zur Verfügung stehenden Breite aus.

Wenn ich für das Inhalts-div width:100% definiere, richtet sich das jedoch nicht nach der zur Verfügung stehenden Breite, sondern nach der allgemeinen Fensterbreite (so verhält sich zumindest der IE).

da haben wir uns falsch verstanden. Eine Breitenangabe ist für den Inhaltsbereich nicht mehr nötig. Er sollte von sich aus und allein 100% der restlichen Beite annehmen:

div#content {
  margin-right:200px; /*Es sind keine Breitenangaben nötig*/
}

Mit freundlichen Grüßen

André

[Zeromancer]

Hallo,

div#content {
  margin-right:200px; /*Es sind keine Breitenangaben nötig*/
}

ich bemerke grade meinen Fehler:

div#content {
  margin-left:200px; /*Es sind keine Breitenangaben nötig*/
}

oder

div#content {
  border-right:200px; /*Es sind keine Breitenangaben nötig*/
}

muss es heißen.

'tschuldigung.

Mit freundlichen Grüßen

André

[Joachim]

Hi,

Resultat aufgrund der linksstehenden Navigation: ich muss nach Rechts scrollen um alles zu sehen, was nicht erwünscht ist.

vielleicht hilft Dir sowas:

<div style="width:200px;float:left;">NAVI</div>
<div style="width:100%">
    <div style="margin-left:200px">Content</div>
</div>

oder sowas:

<div style="width:200px;position:absolute">NAVI</div>
<div style="margin-left:200px;background:#7c7c7c">Content</div>

Gruesse, Joachim

[TG]

»» <div style="width:200px;float:left;">NAVI</div>

<div style="width:100%">
    <div style="margin-left:200px">Content</div>
</div>

Perfekt - vielen Dank.

[snorri]

Hej!

das Inhalts-Div baucht ein margin-right von größer/gleich der Breite des Navi-Divs.

Ach mennö, jetzt wollte ich Euch gerade stolz erzählen, dass ich es hinbekommen habe, und dann steht genau der Weg schon hier :-)

Dabei hatte ich das sogar vorher schon ausprobiert, aber da hatte ich im Inhalts-DIV noch ein "float=left" drinstehen. Ohne das klappt es dann prächtig!

-- snorri

[Ingo Turski]

Hi,

Wenn ich verbotenerweise die "width:100%;" weglasse

nach CSS 2.1 ist das durchaus zulässig - und es wird je nach Konstellation von allen einigermaßen aktuellen Browsern wie gewünscht umgesetzt.
Allerdings ist es hier viel sinmnvoller, wie schon vorgeschlagen den Inhaltsbereich nicht floaten zu lassen.

freundliche Grüße
Ingo