automatische höhe einer div box

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
hallo,

ich habe eine div-box, deren höhe ich automatisieren will. das konstrukt geht vereinfacht in etwa so:

Code:
<div id=1>
<div id=2 style="float: right;">
...
</div>
<div id=3>
noch mehr ....
</div>
</div>

keine der divs hat eine fixe höhe. die höhe bestimmt der inhalt von div 3. ich möchte nun, dass div 2 immer genauso groß ist wie div 3.
 

Simbo

Gast
Kurz und knapp: das geht nicht... :)
Da Div3 vom Inhalt abhängt und somit "keine" Höhe hat, kann man sie auch nicht auslesen und somit auch nicht Div2 dieselbe Höhe zuweisen. Erst recht nicht nur mit CSS...

Ich geh mal davon aus, das div2 ist dein Menü und Div3 dein Inhalt (oder umgekehrt) und du möchtest sie aus designtechnischen gründen gleich hoch haben... es gibt andere methoden, etwas in der art zu erreichen...

Vielleicht erzählst du aber nochmal, was du genau vorhast bzw. welchen Effekt du erreichen möchtest...
 
  • Like
Reaktionen: ma.buso

floeschen

Horneburger Pfannkuchenapfel
Registriert
13.08.06
Beiträge
1.402
Wenn du in DIV3 ein Bild drin hast, das alles überragt und so die Höhe bestimmt, kannst du in DIV2 ein transparentes GIF tun mit der Höhe, die das Bild in DIV3 hat. ;)
 
  • Like
Reaktionen: ma.buso

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
Kurz und knapp: das geht nicht... :)
Da Div3 vom Inhalt abhängt und somit "keine" Höhe hat, kann man sie auch nicht auslesen und somit auch nicht Div2 dieselbe Höhe zuweisen. Erst recht nicht nur mit CSS...

Ich geh mal davon aus, das div2 ist dein Menü und Div3 dein Inhalt (oder umgekehrt) und du möchtest sie aus designtechnischen gründen gleich hoch haben... es gibt andere methoden, etwas in der art zu erreichen...

Vielleicht erzählst du aber nochmal, was du genau vorhast bzw. welchen Effekt du erreichen möchtest...

also ... div 1 ist das inhaltsfeld, rechts ist div 2, mit grauem hintergrund und dort sind die bilder drinne. neben div 2 ist div 3 mit dem text.

wie genau sieht denn die andere methode aus :-D

Wenn du in DIV3 ein Bild drin hast, das alles überragt und so die Höhe bestimmt, kannst du in DIV2 ein transparentes GIF tun mit der Höhe, die das Bild in DIV3 hat. ;)

versteh ich nicht :) bilder sind nur in div 2 drinne ;)
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
kannst du mal das statische html mit css online stellen und einen link posten, dann könnte man einfacher erahnen was du willst und wo es hingehen soll

am besten noch mit backckground: red (green, yellow) im css für die drei bereiche und dann kann man mal gucken was wie wann wo hoch sein soll ;)
 
  • Like
Reaktionen: ma.buso

Simbo

Gast
also ... div 1 ist das inhaltsfeld, rechts ist div 2, mit grauem hintergrund und dort sind die bilder drinne. neben div 2 ist div 3 mit dem text.

wie genau sieht denn die andere methode aus :-D

also ist eigentlich nur das problem, dass der graue hintergrund nicht so hoch wie div3 ist... dann gib doch einfach deinem div1 ein hintergrundbild, dass auf der rechten Seite grau ist.

Oder falls dein div1 bereits ein hintergrundbild hat, füge ein weiteres div innerhalb von div1 ein, das div2 und div3 umschließt und teils grauen, teils transparenten hintrgrund hat.
 

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
also ist eigentlich nur das problem, dass der graue hintergrund nicht so hoch wie div3 ist... dann gib doch einfach deinem div1 ein hintergrundbild, dass auf der rechten Seite grau ist.

Oder falls dein div1 bereits ein hintergrundbild hat, füge ein weiteres div innerhalb von div1 ein, das div2 und div3 umschließt und teils grauen, teils transparenten hintrgrund hat.

würde ich prinzipiell auch so machen - nur hat meine graue box auch noch einen rahmen :)
edit: und die breite der grauen box kann variieren :)
 

Simbo

Gast
ok... da wirds ja richtig kompliziert...

man könnte div3 innerhalb von div2 platzieren... aber dann kriegst du den rahmen nicht 100%ig hin...
Ich will ja nicht den Teufel an die Wand malen, aber eine Tabelle wäre hier die Lösung... :)
 

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
Moin,

der Trick liegt darin, dem umschliessenden DIV einen Hintergrund mitzugeben, der die beiden Spalten darstellt. Egal welcher der beiden innen liegenden DIVs nun größer ist - er bestimmt die Größe des umschliessenden DIVs und damit auch die Wiederholung des Hintergrunds.

Einschränkung: durch das Hintergrundpic sind die Spaltenbreiten festgelegt und können in einem floating Layout nicht mitwachsen.

Gruß Stefan
 

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
Genauer als im Artikel kann ich's leider auch nicht beschreiben. o_O

der Trick liegt darin, dem umschliessenden DIV einen Hintergrund mitzugeben, der die beiden Spalten darstellt. Egal welcher der beiden innen liegenden DIVs nun größer ist - er bestimmt die Größe des umschliessenden DIVs und damit auch die Wiederholung des Hintergrunds.

Einschränkung: durch das Hintergrundpic sind die Spaltenbreiten festgelegt und können in einem floating Layout nicht mitwachsen.

Mein Problem ist ja leider gerade die variable Spaltenbreite. Womöglich könnte ich dort noch nen Abstrich machen, mal sehen was die Design-Fraktion sagt. Da gibt's bestimmt Schläge :)
Quasi müsste ich dann oben und unten noch ein Bild einfügen, damit der untere Rahmen mitkommt... I probier it mal.
 

maxg

Prinzenapfel
Registriert
16.10.06
Beiträge
553
eigentlich bin ich grad dabei, die seite vom tabellenlayout zum css-layout umzustellen.
warum? Weil vielerorts gesagt wird, dass Layout über css richtiger sei? Das stimmt so zwar ABER dann muss man auch Inhalt und layout vernünftig trennen (Stichwort: "semantisches markup") Einfach nur die Tabellenzellen durch <divs> zu ersetzen bringt für dich kaum Vorteile aber dafür schlägt man sich mit genau diesen Positionierungsproblemen rum, die du gerade hast.

Max

p.s. vielleicht findet sich für dich trotzdem was bei cssplay.co.uk ich habe da jetzt aber nicht gesucht
 

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
Moin,

Das stimmt so zwar ABER dann muss man auch Inhalt und layout vernünftig trennen

das würde ich im vorliegenden Fall mal so sehen. Das Konstrukt wie oben beschrieben erscheint mir ganz sinnig.

Das ein floating Layout mal in einer Designvorgabe erscheinen könnte … ich hätt's nicht geglaubt. Normalerweise sind's die Grafiker die in statischen Pixeln denken :oops:.

Gruß Stefan
 

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
Das ein floating Layout mal in einer Designvorgabe erscheinen könnte … ich hätt's nicht geglaubt. Normalerweise sind's die Grafiker die in statischen Pixeln denken :oops:.

Das liegt daran, dass ich es ihnen ausgetrieben habe :)

Ich bemühe mich schon, den Code möglichst korrekt zu gestalten, aber da stößt man hier und da mal auf Grenzen verschiedener Art.

infach nur die Tabellenzellen durch <divs> zu ersetzen bringt für dich kaum Vorteile aber dafür schlägt man sich mit genau diesen Positionierungsproblemen rum, die du gerade hast.

Das Tabellenlayout bestand aus mehreren Tabellen mit insgesamt knapp 50 Zellen, daraus habe ich 6 divs gemacht. ;) Also keine Sorge.