Zwei Bereiche immer gleich hoch

[mike_gold]

Ich habe ein Layout mit css gemacht, dass noch nicht ganz so funktioniert wie ich es möchte.
Im Prinzip sieht es so aus:
div container (Aufruf mit id container)
    div sidebar mit Navigation (Aufruf mit class .sidebar)
        div main mit Hauptinhalten (Aufruf mit class .main)
      /div main
    / div sidebar
/ div container

Der Container hat diese Definiton:
div#content {
  margin: 0 Auto 0 0;  /* some air above and under menu and content */
}

Bei den beiden eingeschlossenen Containern habe ich jeweils mit css folgende classen definiert:

.sidebar {
  float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
  width: 180px;    /* sidebar width, if you change this please also change #main margins */
  display: inline;    /*FIX IE double margin bug */ 
  min-height: 900px;
  height: auto !important;
  border-right: 2px solid #ff9900;
  background-color: #f3f3f3;
  margin-left: 0;
}

.main {
  float: left;
  margin-top: 12px;
  margin-left: 20px; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
  width: 540px;
  height: auto !important;
}

Wenn nun im Hauptfenster der Text länger ist als in der Sidebar und grösser als die 900px dann wird die Sidebar nicht bis unten dargestellt. Wie kann man das hinbringen, dass das gleich gross ist (in der Sidebar ist ein grauer Hintergrund und eine orange Linie, die beide auch so lange sein sollten wie der Hauptbereich.

Was mache ich da falsch?

Bin froh um Tipps.

[mike-r]

Es gibt da verschiedene Lösungen, die Einfachste, Schnellste und "Billigste":
http://alistapart.byteshift.de/fauxcolumns/

Etwas komplizierter geht das Ganze auch mit "echten" Höhen:
http://www.tanfa.co.uk/css/layouts/flexi_floats/
und/ oder:
http://matthewjamestaylor.com/blog/equa ... s-no-hacks

Edit: oops.

[mike_gold]

Habe diese ersten zwei Inputs studiert (der Link zum dritten geht ins Leere), bin aber leider nicht wirklich schlauer geworden.

Wo muss ich bei meinen Stilen denn etwas ändern?
Muss das Bild in den Pagewrapper, ganz in den Hintergrund der Seite oder in die Sidebar (die ist ja meistens zu wenig lang, weil dort nur Links sind).

Ich komme nicht weiter.

[mike-r]

Den 2. Link habe ich korrigiert, mein Fehler.

Beim ersten "einfachen" Link sollte eigentlich ungefähr klar sein, wo es hingeht und wo Dein Problem ist.
Wenn Du hier keine "neuen" Erkenntnisse präsentieren kannst, was Du versucht hast, und wo es genau klemmt, kann ich Dir auch nicht helfen, da bin ich genau auf dem Stand von Deinem ersten Beitrag.

[antibart]

Ich habe mir die Links jetzt nicht angesehen, aber der Begriff "fauxcolumn" lässt vermmuten, dass Mike_r das gleiche meint, wie ich jetzt.

Um ein mehrspaltiges Layout zu gestalten, das sich dynamisch mit dem Seiteninhalt nach unten "verlängert", musst Du ein einzelnes Hintergrundbild für alle Spalten einfügen. Also in den wrapper um die Sidebar und den Content. Das braucht nur wenige Pixel hoch  zu sein.

Sehr vereinfachtes Beipiel:

Angenommen, deine Seite ist insg 800px breit, Sidebar ist 300px (rot) und der Content 500px (gelb)...

Mach ein Image mit 800px Breite und ca 5-10 px Höhe...  Das Image besteht aus nichts anderem als links 300px rote Fläche, rechts 500px gelbe Fläche.

css (vereinfacht)

Code: Select all

#wrapper {
width:800px;
background: url(images/rot_gelb.gif) repeat-y;
}

#sidebar {
width:300px;
float:left;}

#content {
width: 500px;
float:left;} 

Auf height und auch min-height würde ich verzichten, wenn der Inhalt dynamisch ist. Der IE sieht min-height als height und würde die Höhe nicht verlängern.

Wenn die Seite unbedingt mindestens 900px hoch sein soll, würde ich eher irgendwo am Rand im float noch eine dritte Box mit einem 1px breiten und 900px hohen, unsichtbaren gif einfügen.

Also so:

Code: Select all

#wrapper {
width:801px;
background: url(images/rot_gelb.gif) repeat-y;
}

#sidebar {
width:300px;
float:left;}

#content {
width: 500px;
float:left;}

#900px {
width: 1px;
float:left;}
 

html

Code: Select all

<div id="wrapper">
<div id="sidebar">Menu</div>
<div id="content">Text</div>
<div id="900px">
<image src="images/trans.gif" width="1" height="900" alt="." /></div></div


 

..

...

[mike_gold]

Hallo antibart

Das hat mir wirklich weitergeholfen, allerdings habe ich auch noch gemerkt, dass ich einen div-Container zuviel hatte.

Trotzdem noch eine Frage: Ich IE7 kommt es immer richtig, wenn im linken Bereich kein Link steht, dass heisst der Hauptteil im main-Container kommt wirklich in die Mitte. Im Firefox leider nur mit einem Trick (versteckter Text in diesem Bereich.) Sonst setzt es den Text einfach nach ganz links. Geht das nicht auch anders?

Noch eine andere Frage: Wenn ich im linken Bereich, einen Text haben will, immer gleich weit von oben entfernt, unabhängig davon, wieviele Links dort sind, wie stellt man dies an? Jetzt rutsch dieser Text je nach dem, wieviele Links darüber sind.

Gruss Mike

[antibart]

Im Firefox leider nur mit einem Trick (versteckter Text in diesem Bereich.) Sonst setzt es den Text einfach nach ganz links. Geht das nicht auch anders?

Eigentlich schon... wenn Du links einen Container hinpackst (also #sidebar), der eine feste Breite zugewiesen bekommt, dürfte es eigentlich keine Probleme geben

Noch eine andere Frage: Wenn ich im linken Bereich, einen Text haben will, immer gleich weit von oben entfernt, unabhängig davon, wieviele Links dort sind, wie stellt man dies an? Jetzt rutsch dieser Text je nach dem, wieviele Links darüber sind.

Mit margin-top: 20px;

Wenn der Text natürlich UNTER den Links stehen soll, und nicht davon überdeckt sein darf, geht das natürlich nicht. Ergäbe ja auch keinen Sinn:

Du kannst zwei Elemente mit
- position:absolute; und z-index übereinanderschichten, aber dann würde das eine das andere überdecken

- Dem oberen Element ein overflow:auto; (oder wahlweise ein iframe) und ein feste Höhe verpassen. Dann würde ab Übertretung der Höhe durch zuviel Text ein Srollbar erscheinen.

- Wenn aber beides immer komplett lesbar sein soll, geht es halt nicht anders, als dass der text je nach Menge nach unten rutscht. Wie auch?

..

[mike_gold]

Hallo antibart

Waren genau die richtigen Tipps. Habe bei der Navigation auch noch eine feste Höhe eingebaut und den Text darunter mit positon: absolute und einem fixen Abstand von oben festgenagelt, z-index habe ich auch noch gesetzt.

Habe doch einiges gelernt dabei. css ist halt doch nicht so einfach.

Danke für die Tipps.