[florian]

Hallo

ich habe 2 div-Boxen, die nebeneinander liegen:
CSS:

#content{
    background-color: #898989;
         width: 799px;
         height: 100%;
         float:left;
}
#navigation{
    background-image: url(images/25.gif);
         width:201px;
         height:100%;
         float: left;
}

HTML:

<div id="content">Inhalt1</div>
<div id="navigation">Inhalt2</div>

Ich möchte nun dass die Längen der beiden Boxen immer gleich ist.
D.h. wenn "Inhalt1" 1000Zeilen hat, soll die <div id="navigation">-Box auch die Länge von 1000Zeilen haben.

Wie kann ich das erreichen?

mfg

Ich glaube, dass geht nicht. Habe ich zumindest noch nie gesehen. Hat es einen bestimmten Grund, warum es so sein soll? Vielleicht kann man das Problem ja ganz anders lösen...
Im Normalfall ist es eher unsinnig, das Navigationsmenü lönger zu machen,als nötig.

Grüße
flupsi

[Ben]

Meinst Du so etwas hier?
http://forum.developers-guide.net/showthread.php?t=2981

Ich habe nicht so ganz verstanden, was Du willst. Was meinst Du mit "Länge"? Die Höhe, oder?

[florian]

Zitat von Ben

Ich habe nicht so ganz verstanden, was Du willst. Was meinst Du mit "Länge"? Die Höhe, oder?

Ja mit der Länge meine ich die Höhe

@flupsi: In meinem Fall soll das Navigationsmenü aber trotzdem genauso lang sein wie der Content.

Es ist so ziemlich der gleiche Fall wie bei Tabellen:

<table>
<tr>
  <td valign="top">Navigation</td>
  <td valign="top">Content</td>
</tr>
</table>

Hierbei sind beide Spalten gleich lang(/hoch) und wenn sich der Inhalt der einen verlängert, wird die andere auch länger(/höher).
Genau das möchte ich mit meinen div-boxen erreichen.

mfg

[Ben]

Ist das dann nicht das, was ich verlinkt habe?

Da fällt mir nur ein Trick ein:

PHP-Code:

<div id="inhalt">
    <div id="content">Inhalt1</div> 
    <div id="navigation">Inhalt2</div>
</div> 


Wenn Du jetzt die Hintergrundfarbe von #inhalt = #navigation setzt, ist die Navigationsleiste
immer genau so lang, wie wie #content.
#content setzt Du dann auf float:left/right
Das funktioniert aber nur so lange, wie #content länger ist als #navigation.


Grüsse
flupsi

[florian]

Zitat von Ben

Ist das dann nicht das, was ich verlinkt habe?

Ja das ist sowas. Ich hab es mir nun lange angeguckt, aber ich finde nicht den etnscheidenen Befehl den ich bei mir anwenden kann um mein Problem zu lösen.

[Ben]

Übernehme doch einfach mal den Code und gehe dort Stück für Stück durch.

[florian]

Hab jetzt viel rumprobiert und es nun hinbekommen.
Dankeschön

...dann lass uns doch an Deiner Lösung teilhaben. Das ist ja durchaus eine Problemstellung, die auf jeden einmal zu kommen könnte.

Grüsse
flupsi

[pichfl]

ich weiß nicht welche methode er angewendet hat, aber vielleicht hats damit geklappt:
http://www.alistapart.com/articles/fauxcolumns/

oder in einer abwandlung damit:
http://positioniseverything.net/arti...ut/equalheight

(letztere Methode ist sehr elegant, hat aber dank IE7 einige Tücken: Statt dem Autoclear lieber ein element zum "clear" der floats nehmen.)

[Ben]

Zitat von pichfl

ich weiß nicht welche methode er angewendet hat, aber vielleicht hats damit geklappt

Wie wäre es mit "den Thread lesen"? ..

[pichfl]

hab ich.
seine letzte antwort war: ich hab rumprobiert.

ich wollt eigentlich nur ne hilfe geben, für leute mit ähnlichem problem, die beiden lösungen finde ich sehr elegant.
aber wenn nicht, dass halt nicht.

[Ben]

Ich war irgendwie mit den Gedanken in einem anderen Thread *kopfkratz* ...

Ich würde es ja immer noch recht praktisch finden, wenn er einfach selbst schreibt, wie er das Problem gelöst hat.
Grüsse
flupsi

[florian]

Ich habe den Code aus dem Beitrag, den Ben verlinkt hat, genommen und ihn an meine Bedürfnisse angepasst.
Hier auch nochmal der Code aus dem anderen Beitrag:

Zitat von Chr!s

Genau vor dieser Frage wollte ich mich drücken, weil ichs durch ausprobieren herausbekommen hab..
Nun:

#master {
    width: 790px;
    margin: 0px auto;
    text-align: left;
    background-color: #bdbec6;
    border: 1px solid #2680CC;
}

#menu {
    border-bottom: 1px solid #000;
}

#submenu {
    background-color: #bdbec6;
    width: 150px;
    float: left;
}

#content {
    border: 1px solid #efeff7;
    background-color: #fff;
    width: 486px;
    float: left;
}

#rightmenu {
    border: 1px solid #efeff7;
    background-color: #fff;
    width: 150px;
    float: right;
}

.clearboth {
    clear: both;
}

<div id="master">
 <div id="menu">
 </div>

 <div id="submenu">
  SubMenu
 </div>

 <div id="content">
  ContentText
 </div>

 <div id="rightmenu">
  Gerade online:<br />
 </div>

 <br class="clearboth" />
</div>

[Jan]

Und wie hast du ihn angepasst?
Ist ja immer schön zu erfahren was für Möglichkeiten aus sowas ergeben.
Jan

[florian]

Nichts großartiges.
Die Breiten, statt einer Hintergrundfarbe ein Bild und nur ein Menü und ein Content-div

[florian]

Hallo

ich hab nun ein neues Problem.
Ich habe den Code fertig, aber es taucht ein kleiner Fehler auf.
Und zwar habe ich 3 div-Boxen(#navigationl, #content, #navigationr) in einer div-Box (#master) zusammengefasst, damit deren Höhe jeweils gleich ist. Das funktioniert auch.
Meine erstellte Seite soll zwischen den einzelnen inneren Boxen eine 1px breite Linie darstellen. Ich hab mir gedacht, das ich mir eine 1px hohe und 1000px breite Grafik erstelle, die ich als Hintergrund der div-box #master einbinde (meine Seite ist 1000px breit).
Das hat nicht funktioniert, also habe ich noch zusätzlich den beiden äußeren boxen (#navigationl und #navigationr) ein Hintergrundbild hinzugefügt. Damit funktionierte es (fast).
Nun ist die div-box #navigationl höher als #navigationr und somit endet das Hintergrundbild (mit der 1px-Linie) schon früher (siehe hier)

Was muss ich ändern/hinzufügen, damit die Linie/die Grafik bis zum Ende der div-Box #master reicht?

mfg