Höhe einer div festlegen

[Dennis D.]

Moin,

ich habe ein Problem mit CSS. Leider will es nicht so wie ich.

Hier erstaml die Seite: http://dennisdieckmann.de.funpic.de/self/index.htm

Der kleine weiße Teil rechts (content) soll bis unten hin reichen, wie in folgendem Beispiel:

http://dennisdieckmann.de.funpic.de/self/index2.htm

Leider war es mir nur über viele <p>&nbsp;</p> möglich die Ansicht im zweiten Beispiel zu erstellen.

Das geht doch sicherlich auch anders, vor allem weil das mit den p's unzweckmäßig ist. Da das über eine php Datei läuft, müsste ich für jedes Album ne eigene größe festlegen, da ncht überall gleich viel Bilder enthalten sind.
Was aber auch wieder nicht funktioniert, wenn der Nutzer beispielsweise ne andere Schriftgröße eingestellt hat.

Also, wie bekomme ich die div bis unten hin?

Vielen Dank für Hilfe

Gruß

Dennis

[Jonathan]

Hallo Dennis,

Der kleine weiße Teil rechts (content) soll bis unten hin reichen, wie in folgendem Beispiel:

Clear das float am ende der weißen box. Ausführlich wird das hier beschrieben: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout.

Jonathan

[Dennis D.]

Moin Jonathan,

das ganze klappt nur bei float left.

Ich verwende float right, damit ich das Menü nach dem content erstellen kann.
Gibt es dafür auch eine Lösung?

Gruß

Dennis

[Dennis D.]

Ich bekomm es aber auch nicht hin, wenn ich das Menü nach oben setze.

Es will einfach nicht!

[ChrisB]

Hi,

Ich bekomm es aber auch nicht hin, wenn ich das Menü nach oben setze.

Es will einfach nicht!

Mit "es" meinst du dich, und "will einfach nicht" bedeutet, dass es sich bewusst keine Muehe gibt, eine nachvollziehbare Problembeschreibung zu verfassen?

MfG ChrisB

[Dennis D.]

Moin,

die Sache ist die, dass ich diese ganze Sache nicht verstehe.

Mit Tabellen war es so einfach. Der Umstieg auf Divs und weg von dem Tabellenchaos ist schwerer als erwartet.
Vor allem aber die Valide Programmierung macht mir sorgen

Problembeschreibung (bezieht sich auf den ersten Post dieses Threads):

Die Hauptdiv (id=main) enthält zwei weitere divs. Menu und content. Die beiden werden über float nebeneinander positioniert, wobei content die Eigenschaft float right enthält und das Menü als zweite Div erstellt und gefloatet wird.

In manchen Fällen ist das Menü größer als content und andersherum. Aber ich möchte, das der content-Bereich immer bis zum Ende der main-div reicht.

http://dennisdieckmann.de.funpic.de/self/index.htm

So sieht es bisher aus. Ich möchte, das es folgendermaßen wird:

http://dennisdieckmann.de.funpic.de/self/index2.htm

nur eben ohne die <p>&nbsp;</p>

Ich dachte bisher immer, das die Eigenschaft height=100% das Objekt so groß gestaltet, das es das Mutterelement komplett vereinnammt.
Das geht so aber nicht.

Ich habe aber auch keine Idee wie ich es erreichen kann.

Reicht das als Problembeschreibung?

Gruß

Dennis

[Dennis D.]

Ich brauche hier immernoch ne Lösung!

Ich hab schon so einiges versucht, aber es will nicht!

Probelm: http://forum.de.selfhtml.org/?t=167285&m=1091064

[Detlef G.]

Hallo Dennis

Mit Tabellen war es so einfach. Der Umstieg auf Divs und weg von dem Tabellenchaos ist schwerer als erwartet.

Vielleicht liegt es daran, dass du immer noch zu sehr in Tabellen denkst.

Vor allem aber die Valide Programmierung macht mir sorgen

Warum dies?
Der Validator meckert nicht, selbst wenn die Seite als "strict" validiert wird.
Und je länger man darauf achtet, um so weniger Fehler passieren.

Ich dachte bisher immer, das die Eigenschaft height=100% das Objekt so groß gestaltet, das es das Mutterelement komplett vereinnammt.

Nein, height:100% sorgt dafür, dass das Element 100% der fürs Elternelement angegebenen Höhe einnimmt.

Ich habe aber auch keine Idee wie ich es erreichen kann.

Dann überlegen wir mal.
Muss #content 100% der Höhe von #main haben?
Oder soll es nur so aussehen?

Wie wäre es denn, mit:

#main {  
  border-left: 1px #acd0fc solid;  
  border-right: 1px #acd0fc solid;  
  width: 804px;  
  background-image: url('content_back.png');  
  background-repeat: repeat-y;  
  background-position: right;  
  overflow:auto;  
}  

und

#content {  
/*  background-color: #ffffff;  
  border-left: 1px #ACD0FC solid;  
  height: 100%; */  
  float: right;  
  padding: 10px;  
  text-align: left;  
  width: 583px;  
}  

Wie die content_back.png aussehen müsste, fällt dir bestimmt selbst ein.

Auf Wiederlesen
Detlef

[Dennis D.]

Hallo Detlef,

zunächst mal vielen Dank für die Hilfe.

Aber jetzt möchte ich mal was loswerden:

Euro Ideen sind immer so genial wie simpel. Ich komm einfach nicht auf sowas. Ich meine klar.. einfach nen Hintergrundbild. Einfacher kann man das Ganze ja nun wirklich nicht lösen. Aber da komm ich einfach nicht drauf.

Also, Besten Dank an unsere kreativen Köpfe hier im Forum

Gruß

Dennis

[Jonathan]

Hallo Dennis,

Ich bekomm es aber auch nicht hin, wenn ich das Menü nach oben setze.

Es will einfach nicht!

Für's erste lies dir den Artikel von Anfang bis Ende durch, bau alles nach und versetehe es. Entweder du bist danach so schlau, dass du das Beispiel so auf deine Seite umbauen kannst, dass es funktioniert, oder du solltest deine Seite halt einfach auf diesem Code basieren lassen, denn der funktioniert ja,

Jonathan