• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

absolut und relativ nebeneinander?

Space Vampire

Space Vampire

Senior HTML'ler
ich versuche seit gestern abend drei div-container nebeneinander zu positionieren.
der mittlere soll hierbei 100% des verfügbaren platzes nutzen, dabei aber von zwei containern mit der absoluten breite 20px flankiert werden.
gebe ich dem mittleren aber den wert 100%, wird die zeile umgebrochen und die 3 container erscheinen untereinander

Code: 
div.border_left{
 width:20px;
 height:100%;
 float:left;
 background-color:green;
 }
 
div.border_right{
 width:20px;
 height:100%;
 float:left;
 background-color:green;
 }
 
div.inner_box{
 height:100%;
 float:left;
 background-color:red;
 }

Code: 
<div class="border_left"></div>
<div class="inner_box">CONTENT</div>
<div class="border_right"></div>

geht das überhaupt?
kann man absolute und relative container nebeinander positionieren?
 
Na ja, 100% + 2*20 px sind mehr als 100%.

Was genau meinst du mit absolut und relativ?

Eine Möglichkeit wäre so:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>demo</title>

        <style type="text/css">

div.border_left{
    width:20px;    
    float:left;
    background-color:green;
}

div.border_right{
    width:20px;    
    float:right;
    background-color:green;
}

div.inner_box{
    margin: 0 20px;
    padding: 5px;
    background-color:red;
}

        </style>
    </head>

    <body>

        <div class="border_left">.</div>
        <div class="border_right">.</div>
        <div class="inner_box"><p>content</p><p>test</p></div>

    </body>

</html>

height: 100%; geht nicht so ohne Weiteres. Eine Alternative dazu sind vielleicht Faux Columns.
 
Moin,

normal kann man die 20px-Container rechts und links floaten lassen. Der mittlere Container braucht keine Breitenangabe, Blockelemente werden automatisch so breit wie es geht. Da reicht ein entspr. margin:left/right.
Ach ja, die floats gehören zuerst in den Quelltext.

mermshaus;238341 [I schrieb:
height: 100%;[/I] geht nicht so ohne Weiteres. Eine Alternative dazu sind vielleicht Faux Columns.
Zum Vergrößern anklicken....

Bei 100% Höhe muss man fragen 100% von was?.
Damit das mit den 100%-Höhe klappt müssen die 100% für alle Vorfahren inkl. des Wurzelelementes (html) angegeben werden.

Faux Columns ist für (scheinbar) gleichlange Spalten. Wenn eine Website immer bis unten gehen soll nimmt man normal Foot Sticker Alt.

@mermshaus Ich halte es für überhaupt keine gute Idee Fragende mit dem HTML 5 Doctype zu traktieren. Der ist noch in der Entwicklungsphase.
Bei diesem Doctype sollte man schon genau wissen was man tut und das ist bei den Fragenden i.d.R. noch nicht der Fall. :wink:
 
Zuletzt bearbeitet:
koslowski schrieb:
Damit das mit den 100%-Höhe klappt müssen die 100% für alle Vorfahren inkl. des Wurzelelementes (html) angegeben werden.
Zum Vergrößern anklicken....

Und die Gesamthöhe des Seiteninhalts darf niemals die Höhe des Viewports überschreiten iirc. Ich vermute, height: 100%; bewirkt in der überwiegenden Zahl der Fälle nicht das, was als Ergebnis erwartet wird.

koslowski schrieb:
@mermshaus Ich halte es für überhaupt keine gute Idee Fragende mit dem HTML 5 Doctype zu traktieren. Der ist noch in der Entwicklungsphase.
Bei diesem Doctype sollte man schon genau wissen was man tut und das ist bei den Fragenden offenkundig noch nicht der Fall.
Zum Vergrößern anklicken....

Ich sehe da keinerlei Nachteil. Der HTML 5-Doctype versetzt jeden relevanten Browser (nicht bloß die neueren) in den standards mode und bedeutet syntaktisch essentiell dasselbe wie HTML 4.01 und XHTML 1.0 (die ihrerseits essentiell dasselbe sind). Es macht sozusagen keinen Unterschied, ob ich diesen Doctype verwende oder irgendeinen anderen. Nur kommt der von HTML 5 eben ohne FPIs und Unterscheidungen zwischen transitional-, strict- und frameset-Varianten aus. Das ist in meinen Augen ein Wegfall überflüssiger Komplexität, die sowieso niemanden interessiert hat.

Das entscheidende Wissen in Bezug auf Doctypes ist -- pragmatisch gesprochen: Eine Seite braucht einen. Ziemlich egal welchen.

(Abgesehen davon ist XHTML in gewisser Hinsicht Unfug. Mit HTML 5 steht ein Doctype zur Verfügung, der auf der einen Seite XML-kompatible Syntax erlaubt, der auf der anderen Seite aber nicht eigentlich XML sein will und sich nur aus Kulanz überhaupt rendern lässt.)
 
mermshaus schrieb:
Und die Gesamthöhe des Seiteninhalts darf niemals die Höhe des Viewports überschreiten iirc. Ich vermute, height: 100%; bewirkt in der überwiegenden Zahl der Fälle nicht das, was als Ergebnis erwartet wird.
Zum Vergrößern anklicken....

hättest du dir meinen Link angeschaut hättest du gesehen das für foot Sticker Alt ein Element min-height braucht.
Ich verstehe auch nicht so genau, was du mir mit dieser Aussage vermitteln willst.

mermshaus schrieb:
Das entscheidende Wissen in Bezug auf Doctypes ist -- pragmatisch gesprochen: Eine Seite braucht einen. Ziemlich egal welchen.
Zum Vergrößern anklicken....

Du kennst dich vielleicht aus, die Fragenden aber nicht so sehr.
Das solltest du immer berücksichtigen. :wink:

Vor diesem Hintergrund einen Doctype zu empfehlen der noch in der Entwicklung ist, wo sich also noch einiges ändern kann, halte ich für ziemlich fragwürdig und ist sicher nicht im Interesse des Fragenden.

Im übrigen kommt nicht jeder Browser mit diesem Doctype in jeder Situation zurecht.

mermshaus schrieb:
(Abgesehen davon ist XHTML in gewisser Hinsicht Unfug.
Zum Vergrößern anklicken....

Mark Pilgrim kenne ich nicht.
Tatsache ist das kaum ein Webdesigner für seine Arbeiten den HTML 5-Doctype nimmt.
Warum wohl nicht?? Die sind ja nicht alle doof oder rückständig. :wink:
 
hättest du dir meinen Link angeschaut hättest du gesehen das für foot Sticker Alt ein Element min-height braucht.
Ich verstehe auch nicht so genau, was du mir mit dieser Aussage vermitteln willst.
Zum Vergrößern anklicken....

Ich bezog mich damit auf den entsprechend zitierten Teil deines Posts. Ich wusste nicht, dass das alles auf footerStickAlt und min-height gemünzt sein sollte. Den Originalartikel von Cameron Adams dazu kenne ich. Keine Einwände dagegen, der Hinweis darauf war gut. Aber auch footerStickAlt (lässt übrigens nur Footer mit fester Höhe zu) löst height: 100%; nur für einen sehr speziellen Fall und keinesfalls allgemein für ein beliebiges Element innerhalb eines beliebigen anderen Elements. Die Überlegung "height: 100%; = Höhe des Elternelements" stimmt in den meisten Fällen nicht, weil die Höhe des jeweiligen Elternelements in aller Regel nicht explizit gesetzt ist (hattest du ja erklärt). Das wollte ich vermitteln.

Vor diesem Hintergrund einen Doctype zu empfehlen der noch in der Entwicklung ist, wo sich also noch einiges ändern kann, halte ich für ziemlich fragwürdig und ist sicher nicht im Interesse des Fragenden.
Zum Vergrößern anklicken....

Das Risiko hält sich in Grenzen. Abgesehen davon funktioniert dieser Doctype sogar im IE6 und selbst wenn er abgeschafft oder geändert werden sollte -- was nicht passieren wird --, wird er nicht plötzlich aufhören, dort zu funktionieren. Die Rendering Engine des IE6 hat schließlich nicht die geringste Ahnung, dass es mal so etwas wie HTML 5 geben könnte. Abwärtskompatibilität ist zudem eines der Prinzipien von HTML 5.

Im übrigen kommt nicht jeder Browser mit diesem Doctype in jeder Situation zurecht.
Zum Vergrößern anklicken....

Die Aussage gilt wohl für so ziemlich alles.

Tatsache ist das kaum ein Webdesigner für seine Arbeiten den HTML 5-Doctype nimmt.
Warum wohl nicht?? Die sind ja nicht alle doof oder rückständig.
Zum Vergrößern anklicken....

Meinetwegen kann jeder den Doctype verwenden, den er oder sie für richtig hält. Eric Meyer nutzt etwa HTML 4.01 Transitional. Das ist völlig legitim. Kein Doctype ist besser oder schlechter als der nächste. Ich sehe -- auch für Anfänger -- keinerlei Nachteile in der Verwendung des HTML 5-Doctypes, deshalb verwende ich den auch in Beispielcode. Wenn das ab und an dazu beitragen kann, mit einem falschen Verständnis von HTML und XHTML ("Warum nimmst du HTML? Heutzutage schreibt man XHTML!") aufzuräumen (beziehe ich jetzt auf niemanden speziell), um so besser.

HTML 5-Doctypes (in no particular order): Peter Kröner, Erich Eggert, Nico Brünjes, Gerrit van Aaken, Ralf Graf, Information Architects, Shaun Inman, Tantek Çelik, Jon Hicks, Lukas Mathis, Paul Irish, John Resig, Jonathan Snook, Mozilla, Apple, ZEIT ONLINE, Google t. b. c.
 
mermshaus schrieb:
Ich bezog mich damit auf den entsprechend zitierten Teil deines Posts. Ich wusste nicht, dass das alles auf footerStickAlt und min-height gemünzt sein sollte. Den Originalartikel von Cameron Adams dazu kenne ich. Keine Einwände dagegen, der Hinweis darauf war gut. Aber auch footerStickAlt (lässt übrigens nur Footer mit fester Höhe zu) löst height: 100%; nur für einen sehr speziellen Fall und keinesfalls allgemein für ein beliebiges Element innerhalb eines beliebigen anderen Elements. Die Überlegung "height: 100%; = Höhe des Elternelements" stimmt in den meisten Fällen nicht, weil die Höhe des jeweiligen Elternelements in aller Regel nicht explizit gesetzt ist (hattest du ja erklärt). Das wollte ich vermitteln.
Zum Vergrößern anklicken....

okay, da haben wir wohl einfach aneinander vorbeigeredet.

Was HTML5 angeht werden wir wohl unterschiedlicher Meinung bleiben, das finde ich aber jetzt nicht wirklich schlimm.
Hauptsache jeder konnte seinen Standpunkt darlegen. :-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben