DIV-Container, Eltern soll kleiner sein als Kind und mit laufen bei Textänderungen

ricasimo

Grünschnabel
Hallo,

ich habe hier ein kleines div-container Problem, siehe Bild.

Der Eltern-Container (pink) soll sich ebenfalls wie der Kind Container (gelb) in der Höhe ändern wenn sich der Text ändert. Beim kind funktioniert es soweit durch auto-height etc, aber bei der Eltern-div leider nicht.

Sobald ich auto-height setze, geht pink runter bis pink vom nächsten div. Der Eltern-Container soll aber immer 50px breiter sein als der Kind-Container und 50px weniger in der Höhe sein als das Kind.

Manuell gesetzt geht es wenn ich Höhenangaben fixiert setze und absolut, aber die Browser machen dann das layout kaputt da sich die Schrifthöhen ständig ändern je Browser. Das Kind div ist relativ und das Eltern auch, Kind ändert die Höhe bei Textänderung, Eltern leider nicht, ich kann nur manuell die Höhe beeinflussen durch Höhenangabe, aber wie gesagt sieht es in den Browsern immer untersciedlich aus da Elter in der Höhe stehen bleibt und Kind nicht.

Hat jemand klugen Rat oder ein Beispiel?

LG
ricasimo
 

Anhänge

  • div-problem.jpg
    div-problem.jpg
    147,8 KB · Aufrufe: 13
Der Eltern-Container soll aber immer [...] 50px weniger in der Höhe sein als das Kind.
Dein Vorhaben ist leider so nicht möglich. Es liegt nunmal in der Natur der Sache, dass sich die Höhe des Elternelements durch den Inhalt seines Kindelements ergibt, und somit der obere und untere Rand gegenüber der inneren Box nicht "negativ" zurückspringen kann.

Hingegen bei benachbarten Elementen ist dieses Konstrukt realisierbar, sofern sie keine variablen, sondern absolute Höhen besitzen, und in der Schichtposition z-index übereinander gelegt werden. Ein Zuwachs der Höhen ist somit aber nicht mehr gegeben!

Beispiel: http://jsfiddle.net/spicelab/sn25jLtd/
HTML:
<div class="wrap">
  <div class="box-1"></div>
  <div class="box-2">content of box-2</div>
</div>
CSS:
.wrap {
  position:relative;
  width:300px;
  height:450px
}
.box-1 {
  position:absolute;
  top:25px;
  left:0;
  z-index:1;
  width:300px;
  height:400px;
  background:deeppink
}
.box-2 {
  position:absolute;
  top:0;
  left:25px;
  z-index:2;
  width:250px;
  height:450px;
  padding:25px;
  box-sizing:border-box;
  background:yellow
}

Aber dieses fixe/starre Modell entspricht ja nicht deinen Vorstellungen.
[edit]jsfiddle-Demo hinzugefügt[/edit]
 
Zuletzt bearbeitet:
Danke für die Antwort. Leider ist starr keine Option, ich hatte pink starr, aber durch die verschiedenen Browser werden die schrifthöhen immer verändert und das kindelement wächst mit, leider aber in den unteren pink rein, darum sollen beide flexibel sein. Kann so etwas mit js realisiert werden? Sprich das ohne z Index das Eltern DIV immer 50px weniger ist in der Höhe?

Lg
 
Gibt es eine Möglichkeit in CSS eine Höhenangabe abzüglich oder zuzüglich ...px anzugeben? Damit würde sich doch das Problem erledigen. Sprich Auto-hide -50px
Kennt einer da was?
Danke
 
Zuletzt bearbeitet:
Ich könnte dir hier aber mit einer "Behelfskonstruktion" weiterhelfen :)

http://jsfiddle.net/spicelab/2wsL0xev/
HTML:
<div class="outerWrap">
  <div class="topBox"></div>
    <div class="innerWrap">
      <div class="contentBox">content<br />content<br />...</div>
    </div>
  <div class="bottomBox"></div>
</div>
CSS:
.outerWrap,.innerWrap {
  width:300px
}
.topBox,.bottomBox {
  height:25px
}
.innerWrap {
  background:deeppink
}
.topBox,.contentBox,.bottomBox {
  width:250px;
  margin:0 auto;
  background:yellow
}
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Deine Behelfskonstruktion hatte den richtigen Anstoß, einfach einen Container noch darunter setzen und gut ist, klappt auch mit Linien, läuft automatsich voll mit und der Abstand zum nächsten "wrap" Container ist auch gleich gesetzt mit margin-bottom: ..px. Super und ein Riesen-Dankeschön.
Hier ist die Lösung für das Problem.

http://jsfiddle.net/ricasimo/qo7r7ge3/

HTML:
<div id="wrap">
  <div id="content">Content<br />Content<br />Content<br />Content<br />Content<br /></div></div>
  <div id="footer">Footer Content</div>

CSS:
#wrap
{
  position:relative;
  background:deeppink;
  left:10px;
  width:300px;
  height:auto;
  top:50px;
  border:0px #000000 solid;
}
#content
{
  position:relative;
  background: #ffff00;
  left:25px;
  width:220px;
  height:auto;
  top:-25px;
  border-left: 1px #000000 solid;
  border-right: 1px #000000 solid;
  border-top: 1px #000000 solid;
  padding-left:15px;
  padding-right:15px;
  padding-top: 10px;
}
#footer
{
  position:relative;
  background-color: #ffff00;
  left:35px;
  width:220px;
  height:50px;
  top:25px;
  border-left: 1px #000000 solid;
  border-right: 1px #000000 solid;
  border-bottom: 1px #000000 solid;
  margin-bottom:25px;
  padding-left: 15px;
  padding-right: 15px;
}


Danke dir spiceLab.

LG
Ricardas
 
Zuletzt bearbeitet:
Zurück