CSS Floated Div Height dynamisch setzen

[Xetoxyc]

Hi,

ich hab ein Boxed Layout
bestehend aus

-----Header-----
Menu | Content
-----Footer------

genau so angeordnet wie geschrieben.

nun hät ich gern das die

height des Menus an die height des contents
bzw. die
height des contents an die height des menus

angepasst wird, da der inhalt von Content und menu dynamisch ist.

Nur leider bekomm ich das nicht so hin...

hab gefunden das es mit
<div style="clear:both;" />
funktionieren soll
nur weis ich nciht wirklich wie man es verwenden soll... außerdem hab ich gelesen das es veraltet ist und es mit overflow: hidden auch gehn sollte... was mich auch nicht zum ziel brachte

<div id='container'>
    <div id='header'>
    </div>

    <div id='menu'>
    </div>

    <div id='content'>
    </div>

    <div id='footer'>
    </div>
</div>

#container{
    width: 850px;
}

#header{
    height: 100px;
    width: 100%;
}

#menu{
    float: left;
    width: 150px;
    padding: 10px 15px 10px 15px;
    border-right: 3px dotted #555500;
}

#content{
    margin-left: 150px;
    padding: 10px 40px 10px 40px;
}

#footer{
    height: 40px;
    clear: both;
}

 

[Überkinger]

Hi,

height: auto !important;

schon probiert?

 

[Xetoxyc]

jetzt schon funktioniert auch nicht

 

[Überkinger]

jetzt schon funktioniert auch nicht

Bestimme auch für den #container mal eine fixe Höhe. Überhaupt ist es am besten, allen Containern fixe Maße zu verpassen. Abzüglich Rändern bekommst Du damit noch immer das sauberste Layout hin, das jeder Browser versteht. Bei fehlenden Maßen oder auto-Einstellung, macht all zu oft der Browser was er gedenkt. was richtig sei.

 

[Xetoxyc]

naja das erfüllt aber nicht den sinn und zweck den inhalt dynamisch darzustellen?
alle fixen boxen haben ja eine explizite höhe erhalten
alle auser eben menu und content da diese dynamisch ihre höhe anhand des inhaltes in abhänigkeit voneinander erhalten sollen

Ergänzung (12. März 2012)

Problem gelöst hab einfach
eine min-height angegeben

 

[radioactiveman9]

Hilft das?

 

[Xetoxyc]

is ja das blreispiel das ich gebracht hab und nciht funktioniert hat
aber danke

 

[Daaron]

kapsel es anders:

<div id="wrapper>
<header id="header">
</header>
<div id="container">
<aside id="left">
</aside>
<div id="content">
</div>
</div>
<footer id="footer>
</footer>
</div>

Jetzt gibst du #left,#content und #container jeweils n float:left;. Zusätzlich kriegt #content noch n margin-left um so viel, wie #left breit ist. #footer kriegt n clear:both;. Das sollte funktionieren.
Die ungewöhnlichen Tags sind übrigens HTML5

 

[Xetoxyc]

ty aber da es in älteren browser auch gehen soll is es wohl nicht ratsam html5 zu benutzen

trotzdem danke

 

[morcego]

Wie alt willste denn? IE5?
Gibt da so ein JS von Google was den älteren IE die neuen Elemente beibringt.
Und irgendwie entwickelt man ja nicht für gestern, gelle.

 

[benneq]

Das Problem dürfte nicht nur der IE5 haben, sondern auch 5.5, 6, 7, 8. Der 9er hat evtl. schon den Support für diese Tags, schließlich unterstützt er zum Teil HTML5. Aber sicher bin ich mir da nicht...
Es gibt nun ca. 3 Alternativen:
1. Du nennst die Teile nicht header, footer und aside, sondern einfach div
2. Du setzt irgend so ein JS ein, dass das übernimmt (Lösung von morcego)
3. Schau mal hier, da sind weiter unten Tips, wie man es zumindest dem IE8 beibringt: http://www.html-seminar.de/html-5-strukturierende-elemente.htm

In allen Fällen wirst du dich aber mit CSS prügeln dürfen, weil die Microsoft Browser manche Attribute nicht verstehen oder anders interpretieren, etc.

 

[Daaron]

Is doch ganz einfach: du schreibst einfach zu jedem der Tags eine CSS-Deklaration, in der du ihm ein display:block; zuweist. Danach erkennen selbst Holzbrowser die Dinger als Blockelemente und behandeln sie so wie <div>. <header>, <footer> und Co. dienen einfach nur der Semantik und der Übersicht im Code.

Außerdem: KEIN MITLEID FÜR DIE MEHRHEIT!
Der beste Weg, die ganzen Idioten mit <=IE8 mal zum Patchen zu bewegen ist, ihnen das Web zu versperren. Wenn sie irgendwann nur noch Fehlermeldungen und about:blank beim surfen sehen begreifen sie vielleicht, dass man mal entweder Windows Update durchlaufen lassen sollte oder eben gleich FF/Chrome/Opera/Safari einsetzen könnte.

 

[benneq]

Prinzipiell hast du ja recht. Ich selbst setzte Webseiten seit Monaten nur noch in reinem HTML5 um und alle anderen bekommen eine hübsche Meldung, die besagt, dass sie selbst oder ihre Arbeitgeber verantwortungslose Schweine sind.

Aber objektiv betrachtet gibt es immer noch eine riesige Gruppe, die man aussperrt, obwohl es vielleicht genau die Zielgruppe ist: Firmen! So ziemlich alle Arbeitsplätze mit Computer kriechen mit uralter Software durch's Web. Selbst da wo ein Firefox verwendet wird, ist es meist noch Version 3.5.

 

[morcego]

Ich hab unser Netzwerk drastischst auf IE9 umgestellt und IE8 bei den restlichen XPs.
Dahingehend bin ich der Admin from hell!

Und wie ja gesagt wurde, auch in älteren Browsern ist das alles kein Ding.
Der IE7 kommt wunderprächtig mit dem HTML5 klar wenn er die Starthilfe bekommt.
Und ich meine das sogar im 6er auf W2K getestet zu haben, ging auch.
Wer sauber hantiert hat langfristig mehr davon - meine Erfahrung.
Und der IE10 wird keine If IE Browserweiche mehr kennen, dann kann mans auch weglassen.
Ich freue mich shcon wie Bolle, wenn diese ganzen IE Browserweichen im 10er "explodieren".
Ieeehhh, man muss auf einmal doch korrekt hantieren anstatt alles zu verschlimmbessern. Katastrophe!

Und, der IE9 rendert mittlerweile sauberer und qualfreier als FF und Opera.
Mittlerweile passe ich für die beiden Hirsche mehr an als für den IE9.
Die Zeiten wo MS krude Browser ablieferte sind vorbei, muss man nur mal langsam realisieren.

 

[benneq]

Wenn man die JS Teile einbaut, dann könnte eigentlich sogar der IE 5.5 damit klarkommen (rein theoretisch). Das mit dem FF und Opera liegt aber auch einfach daran, mit welchem Browser man hauptsächlich entwickelt. Bei mir ist es Chrome bzw. Safari. Aber ein paar Freunde nehmen den FF und beschweren sich, dass der IE und Chrome rumzickt beim CSS. Für mich machen halt FF und IE die Probleme...

Wenn du schon Admin bist, dann solltest du den IE auf die Blacklist setzen. Die anderen Browser laufen selbst auf einem XP (Außer du brauchst ActiveX )

Für mich ist bei der Entwicklung auch nicht JS oder CSS das große Problem sondern viel mehr Canvas und SVG. Und seit neustem auch CSS3-Transitions. Ich weiß, dass es für all diese Sachen Wrapper Bibliotheken gibt, aber ich ignorier das eiskalt, denn Menschen die auf sehr(!) interaktive Seiten gehen, machen das in der Regel privat und privat kenne ich niemanden der auf den IE setzt

 

[Daaron]

Aber objektiv betrachtet gibt es immer noch eine riesige Gruppe, die man aussperrt, obwohl es vielleicht genau die Zielgruppe ist: Firmen! So ziemlich alle Arbeitsplätze mit Computer kriechen mit uralter Software durch's Web. Selbst da wo ein Firefox verwendet wird, ist es meist noch Version 3.5.

FF3.5 sollte mit dem Großteil klar kommen... und für den Rest gibts Sachen wie modernizr, CSS3PIE,...

Und, der IE9 rendert mittlerweile sauberer und qualfreier als FF und Opera.
Mittlerweile passe ich für die beiden Hirsche mehr an als für den IE9.
Die Zeiten wo MS krude Browser ablieferte sind vorbei, muss man nur mal langsam realisieren.

Der IE9 mag korrekt rendern, er ist aber trotzdem der Technik hinterher. MS haben einen zu lahmarschigen Release-Zyklus für so etwas dynamisches wie das Web.

Für mich ist bei der Entwicklung auch nicht JS oder CSS das große Problem sondern viel mehr Canvas und SVG. Und seit neustem auch CSS3-Transitions. Ich weiß, dass es für all diese Sachen Wrapper Bibliotheken gibt, aber ich ignorier das eiskalt, denn Menschen die auf sehr(!) interaktive Seiten gehen, machen das in der Regel privat und privat kenne ich niemanden der auf den IE setzt

Canvas muss ich mir echt auch mal genauer angucken, damit hab ich noch gar nicht gearbeitet. Transitions verwende ich inzwischen recht gern für reinen Eyecandy. Das Dropdown-Menü ploppt nicht auf, es fadet/scrollt ein. Der Button hat beim Hover nicht einfach ne andere Farbe, er wechselt geschmeidig Farbe, Form und Transparenz-Wert.
FF kanns, Chrome kanns, Safari war eh der Erste, der's konnte, Opera sollte auch mitspielen, Android&iPhone könnens... Auf IE9 nehm ich da nur in soweit Rücksicht, dass es bei denen halt *plopp* macht und das Element da ist.

Ich fang auch langsam an, nicht alles mit <input type="text"> zu lösen. Es gibt sooooo geile neue Elemente, die alle einen automatischen Fallback auf "text" haben, aber für Chrome/FF einfach absolute Leckerli sind. Ich nutz z.B. in Formularen schon aktiv die HTML5 Form Validation... Um PHP-Validierung kommt man zwar trotzdem nicht drumrum, aber es erspart zumindest den JS-Validator.

 

[benneq]

Ich bin einfach kein Freund von diesem JS-Fix-Dies-Fix-Das Kram. Entweder geht's überall oder die IE User haben Pech gehabt. Für Canvas und SVG gibt's auch JS-Fix-Libs. Wenn man es objektiv betrachtet ist (oder eher war) der IE total fortschrittlich. Schon der IE 5.5 hatte Support für Vektor-Grafiken, nur leider kein SVG sondern VML. Also vor 10 Jahren konnte der im Prinzip schon alles was aktuell 'modern' ist Das Zeug wurde nur mal wieder nicht standarisiert etc. Aber nachdem der Standard (SVG) dann da war haben sie sich natürlich geweigert das zu implementieren...

Das versteh ich aber nicht: Fortschrittsglaube und PHP? Das passt hinten und vorne nicht. In Rails ist Validierung ein Kinderspiel. Ich sag ihm 1x was er wie validieren soll und er generiert mir vollautomatisch den JS Code dafür. Zum einen ist die Form viel übersichtlicher und zum anderen auch viel weniger fehleranfällig. Aber ehrlich gesagt: Mich hat der Umstieg auch viel Nerven und Zeit gekostet. Ruby ist einfach 'anders' in der Bedienung. Aber nach der Eingewöhnung, kann man mit ein paar Zeilen Code riesige Systeme aufstellen, die sehr resistent gegen Attacken und ungleichmäßiges Verhalten sind

 

[Daaron]

Ich bin einfach kein Freund von diesem JS-Fix-Dies-Fix-Das Kram. Entweder geht's überall oder die IE User haben Pech gehabt. Für Canvas und SVG gibt's auch JS-Fix-Libs. Wenn man es objektiv betrachtet ist (oder eher war) der IE total fortschrittlich. Schon der IE 5.5 hatte Support für Vektor-Grafiken, nur leider kein SVG sondern VML. Also vor 10 Jahren konnte der im Prinzip schon alles was aktuell 'modern' ist Das Zeug wurde nur mal wieder nicht standarisiert etc. Aber nachdem der Standard (SVG) dann da war haben sie sich natürlich geweigert das zu implementieren...

Eben, Microsoft konnten früher mal was, haben dann aber mit ihrer Trägheit und Sturheit den Anschluss verloren. Das W3C standardisiert, MS ignoriert... Evtl. haben die geglaubt, dass Marktführerschaft ihr gottgegebenes Recht ist. Die Antwort auf diesen Irrglauben erhalten sie nun schon seit ner Weile von der Mozilla Foundation und Google. Daran hat der IE9 nix geändert, obwohl er zum Release durchaus akzeptablen Support hatte. Genau so wird der IE10, 11,.... nix daran ändern, wenn MS nicht ihr grundsätzliches Arbeitsprinzip umstellen: schneller, standardkonform, flexibel, erweiterbar

Das versteh ich aber nicht: Fortschrittsglaube und PHP? Das passt hinten und vorne nicht. In Rails ist Validierung ein Kinderspiel. Ich sag ihm 1x was er wie validieren soll und er generiert mir vollautomatisch den JS Code dafür.

Was passt dir denn nicht an PHP? Es ist eine stabile Scriptsprache, jeder Hoster bietet PHP an und viele CMS & Shopsysteme basieren auf PHP. Wir werden vom Kunden nicht dafür bezahlt, dass wir das Rad jedes Mal neu erfinden, wir liefern schnelle und effektive Lösung. Das heißt auch: Wir nutzen, womit wir uns auskennen: PHP & PHP-basierte CMS/Frameworks/Shops. Ich kann entweder mit einer mir völlig unbekannten Sprache wochenlang an einem einfachen Projekt sitzen, oder ich kann es in einem Tag in Contao startklar machen. PHP ist echt noch lange nicht so tot, wie viele immer fälschlich behaupten. Vor allem interessant, wie Leute hier im CB-Forum PHP schlecht reden... über ein PHP-Forum. Oder starten die Flamewars etwa schon bei Facebook (PHP via HipHop)?
Und was willst du mit JS-basierter Validierung? Die bringt dir NADA. Formulardaten müssen vom verarbeitenden Serverscript (und das ist eben oftmals PHP) validiert werden, nicht von etwas, dass der Client mit nem Fingerschnippen übergehen oder manipulieren kann.

Klassen wie Mootools Form.Validator.Inline sind genial, um leicht und verständlich vorm Absenden bereits eine Prüfung von Pflichtfeldern und Datentypen zu machen, eine Endlösung ist sowas aber genauso wenig wie HTML5 Validator. Das ist eine reine Kundenhilfe: er kriegt vorm Submit -> Reload schon eine Info, was er falsch gemacht hat. Der Vorteil von HTML5 ist einfach, dass es schneller, leichter und stabiler ist als JS-Implementierungen.

 

[morcego]

Wenn du schon Admin bist, dann solltest du den IE auf die Blacklist setzen. Die anderen Browser laufen selbst auf einem XP (Außer du brauchst ActiveX )

Teufel werd ich tun, wie soll ich den Leuten Links per GPO unterschieben wenn nicht mit dem IE. Die schöne Domänenwelt kennt der gemeine Anwender aber nicht, von daher wird da häufigst gemeckert wie doof das alles ist äh wäre.

Der IE9 mag korrekt rendern, er ist aber trotzdem der Technik hinterher. MS haben einen zu lahmarschigen Release-Zyklus für so etwas dynamisches wie das Web.

Ich fang auch langsam an, nicht alles mit <input type="text"> zu lösen. Es gibt sooooo geile neue Elemente, die alle einen automatischen Fallback auf "text" haben, aber für Chrome/FF einfach absolute Leckerli sind. Ich nutz z.B. in Formularen schon aktiv die HTML5 Form Validation... Um PHP-Validierung kommt man zwar trotzdem nicht drumrum, aber es erspart zumindest den JS-Validator.

Rendern etc. reicht mir ja erstmal bei recht shclichten Seiten. Wer Rumgefliege haben will muss halt frickeln. Ich finds ausreichend nett

Das ganze Formularzeug ging bisher nur im Opera die es auch eingeschleppt haben. Sowas wie type=date hatten wir auch nach dem umbau drin, ging aber nur im Opera und da flog es erstmal wieder raus. In nem jahr vielleicht nochmal andenken. ^^

 

[benneq]

Die Validierung in Rails macht beides mit jeweils einer Zeile Code
An PHP stört mich prinzipiell nicht, dass das System nicht funktioniert, sondern dass es unübersichtlich ist und sehr leicht fehleranfällig.