divs nebeneinander alle 100% Höhe - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign)

bine · registriert: 06-07-2002

folgendes Problem, welches mir nun schon lange Kopfschmerzen bereitet:

mehrere divs befinden sich in einem aussen div und sind nebeneinander positioniert.
Das aussen div nimmt automatisch die Höhe des Browserfensters ein. also height:100%
die inneren divs nehmen automatisch die Höhe des aussen divs ein. ebenfalls height:100%

soweit so gut.
Wird aber der Inhalt von einem innen div höher, dann wächst zwar das aussen-div mit, aber die anderen innen divs bleiben kürzer. (siehe Beispiel)

Wie kann man es nun lösen, das alle innen divs automatisch sich nach dem längsten richten und immer 100% des aussen divs annehmen? Das wär für mich eigentlich logisch das es so ginge mit dem nachfolgenden Code. Geht aber nicht

Hier der beispiel-code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="aussen" style="width:100px; height:100px; background-color:#FF7F7F; margin:0px;">
	<div style="float:left; background-color:#c4c4c4;height:100%;">1<br />1a<br />1b<br />1c<br />1d<br />1e<br />1f<br />1g<br /></div>
	<div style="float:left; background-color:#00FFAF;height:100%;">2</div>
	<div style="float:left; background-color:#E0FAFC;height:100%;">3<br />3a<br />3b</div>
	<div style="float:left; background-color:#FFFF00;height:100%;">4</div>
	<div style="clear:both;"></div>
</div>
</body>
</html>

dkdenz · registriert: 13-04-2004

Soweit ich das einschätzen kann geht das nicht.

bine · registriert: 06-07-2002

falsche Antwort

hoffentlich gehts doch. Das ist doch was ganz normales?
Ich hab links einen Bereich in einer Farbe und rechts daneben einen content Bereich in einer anderen Farbe.
Und das Ganze soll immer egal wie lang der content ist, eine einheitliche Länge haben und unten mit der Browser Unterkante abschließen.
Ist das denn soo ungewöhnlich?

Würd doch blöd aussehen, wenn die Navi (Hintergrund gelb) bei 500 endet und daneben der content (Hintergrund weiss) 200px weiter runterreicht. Dann erscheint unter dem gelben Navibereich noch ein Stück der Seiten-Hintergrundfarbe grau.

Im IE geht das ja aber in den anderen Browsern nicht.

hm. Klar ich könnte eine feste Höhe festlegen und iframes nehmen und wenn der content länger ist wird dann im iframe gescrollt, will ich aber nicht so gerne.

dkdenz · registriert: 13-04-2004

Vielleicht kann man da was mit JS machen ?

bine · registriert: 06-07-2002

phuh, geht doch.
Weisste woran es gelegen hatte, war der weitere Content
Hier auf dieser Seite war das wo es nicht ging,
http://www.art-stylers.de/kiga/konzept6.html
weil im Content-Bereich nicht nur einfacher Text war sondern images wiederum mit float:left. Das hat sich wohl gebissen.

und hier gehts dann:
http://www.art-stylers.de/kiga/konzept6a.html

zumindest im IE und Mozilla
Opera hab ich derzeit nicht und deshalb noch nicht probiert.
Nun mal schaun wie es denn funktioniert mit den Bildern und daneben Text im Content-Bereich.

Hier nochmal zum ansehen die dazugehörigen styles
http://www.art-stylers.de/kiga/style6.css

womstar · registriert: 22-07-2002

also von der logik her arbeiten die anderen borwser richtig und der IE falsch.
weil was fest ist ist nun mal fest.

aber zum glück hatte ich mich dem problem auch mal gestellte.
und bin auf die idee gekommen einen höhen-halten einzubauen.

der ganz allein für die höhe zuständig ist wenn weniger als gedacht text in dem div ist.
sprich nirgendswo werden höhen angeben nur bei diesen höhen halter.

z.b.:

<div>
<div style="font-size:1px;line-height:0px;float:left;height:400px;width:1px;"></div>
<div style="float:left;">
hallo
</div>
<br style="clear:both;font-size:1px;line-height:0px;" />
</div>

bine · registriert: 06-07-2002

jo, der Höhenhalter ist bei mir das div mit der id=aussen Der zieht sich immer auf 100%
und die innen divs ziehen sich auf die Höhe des aussen divs.

Das war ja von vornherein schon mein logischer Gedanke. Nur das es halt auf der Konzept-Seite nicht ging, wegen dem folgenden Content.

Nun muß ich es nur noch hinbekommen, das links ein Bild und daneben der zum Bild gehörige Text kommt.

Eigentlich will ich ja eh nicht, das der Text um das Bild fließt sondern danebensteht.
Und jedesmal wenn ein neues Bild kommt dann steht der dazugehörige Text wieder daneben. aber linksbündig neben dem Bild und nicht wenn der Text länger ist als das Bild hoch, das dann der Text unter dem Bild links weitergeht.

Da hab ich im Moment nicht den Durchblick. Aber mal schaun. Geht nicht gibts nicht.

womstar · registriert: 22-07-2002

nur das die 100% etwas unterschiedlich immer ausfallen.

und das mit dem bilchen und dem text .. 2 divs mit float:left ?

bine · registriert: 06-07-2002

Hauptsache das Ganze ist unten gerade zuende. Das ist mir am wichtigsten.

genau das mit den zwei divs drin hab ich auch schon gedacht, aber hab ich dann immer die Höhe von Bild und Text oben zusammen?
Oder ich muß jeden Textbereich in ein ihre eigenen zwei divs setzen.
also

div aussen
div bild float:left div text
div bild float:left div text

nachher probier ich das muß jetzt erstmal wieder weg.

womstar · registriert: 22-07-2002

bine · registriert: 06-07-2002

unabhängig vom Schwerpunkt des Themas mal abgesehen ist

Code:

<br font-size:1px;line-height:0px;

eine geschickte Variante, logisch aber ich wär gedanklich nicht so drauf gekommen. In meinem Code hab ichs allerdings ohne diesen Zusatz gelassen, weil ich den Abstand dort haben möchte.

OK zum Thema, welches sich mittlerweile leider als recht kompliziert und durch reines lesen des Threads kaum nachvollziehbar erweist:
Das img könnte in diesem Fall direkt den float:Befehl beinhalten. Braucht glaub ich nicht in ein extra div!?

Aber ob so oder so: nee, kann man machen was man will, das erste clear:both hebt ja auch das float:left zwischen Navi und Content-Bereich auf und der gesamte Content rutscht dann nach links und unter den Navi Bereich.
Und im Mozi wird auf diese Weise der Text unter dem Bild angezeigt.

Ich habs jetzt einfach mal mit float:right probiert (von mir aus kann das Bild ruhig nach rechts) und anschließend jeweils clear:right gesetzt, damit das float:left von Navi und Content-Bereich nicht berührt wird.
Das ist soweit schon OK im IE, dann bleibt der Content-Bereich insgesamt noch an der richtigen Stelle und rutscht nicht nach links unten.
Aber nützt ja auch nichts, weil im Moz halt der Text unter dem Bild erscheint.

Ganz mal davon abgesehen, das sowie ich in dem Inhaltsbereich noch divs mit float verschachtele, wird die height:100% und margin:0px Angabe der Bereiche Navi und Content gar nicht berücksichtigt und ich hab zwei verschieden hohe Bereiche.

Fazit: ich bastel noch weiter dran, vielleicht fällt mir was ein.
Falls Jemand da noch durchsteigt oder sich das ausprobieren antun mag, bin ich für Tips und Tricks offen.
Es geht um dieses Seitenlayout: http://www.art-stylers.de/kiga/konzept6.html

dkdenz · registriert: 13-04-2004

In der Not kann man auch ruhig mal ein <table> nehmen...

bine · registriert: 06-07-2002

ja klar, da hast du recht, doch was tut man nicht alles um zu probieren was geht

So kann ich halt feststellen wann es sinnvoll ist es anders zu machen.
Diese Entscheidung des wie geh ich nun da ran, wär doch schön wenn man das vorher schon wüßte.

OK da kann man sagen nimm doch gleich Tabellen, da weiß man wies geht, aber nun ja, es gilt das auszuloten.

für heut sag ich gute Nacht

womstar · registriert: 22-07-2002

naja, im grunde ist ja der seiten aufbau nicht gerade schwer, ich denke einfach das einige angaben etwas quer gesetzt sind.

ich würde überlegen ob ich den ganzen header nicht als grafik mache und den rest als 1 pixel streifen als background-image repeaten lasse.

bine · registriert: 06-07-2002

Also Knuddels, es hat mir keine Ruhe gelassen.
Hab drüber geschlafen und nochmal neu gemacht. Es mußte doch gehen.
Siehe auf der Seite Einblicke.

http://www.art-stylers.de/kiga/einblicke.html

Es geht juhuu. Bilder links Text rechts daneben und der Navi und Content-Bereich schliesst unten gerade ab.

Ist jetzt zwar grad etwas überlang, aber das schau ich später. Bin schon froh, das endlich nach tausend Versuchen das mit dem gefloate klappt.

Ein grundlegener Fehler, den ich gemacht hatte lag in dem zweiten folge style für #inhalt * Mit den margins und paddings, da muß man höllisch aufpassen.

Fazit: Das mit dem Positionieren erscheint wenns mal fertig ist zwar einfach, aber das Prinzip will erstmal richtig verstanden werden. Im Moment ist es für mich eher endlose Fummelei von Sachen die mir logisch erscheinen aber denn doch nicht funktionieren. Es gibt ja soo viele Varianten