[jogibaer]

Hallo zusammen,

ich habe ein Problem mit dem wachsen der Container.

und zwar:

Ich benutze drei container die alle gefloatet werden (float: left) im linken und rechten Container ist ein Border-solid eingebunden und in der mitte soll text integriert werden.

Falls der Text in der mitte größer wird soll der linke und der rechte Container verkleinert werden (also der Strich sollte kleiner werden) aber leider klappt das nicht.


Hier mal der div container aus dem HTML Code:

<div class="teaser_ueberschrift">

<div class="teaser_ueberschrift_links">

</div>

<div class="teaser_ueberschrift_mitte">
Veranstaltung Veranstaltung
</div>

<div class="teaser_ueberschrift_rechts">

</div>
</div>

und hier das CSS dazu:

.teaser_ueberschrift{
position: relative;
width:1000px;
padding-top:100px;
padding-bottom:100px;
margin-left:140px;
background-color:#cc0000;
margin-bottom: 40px;
clear:both;

}

.teaser_ueberschrift_links{
position: relative;
background-color:#cc0000;
border-bottom: 4px solid #e59f00;
float:left;

}

.teaser_ueberschrift_rechts{
position: relative;
background-color:#cccc00;
border-bottom: 4px solid #e59f00;
float:left;

}

.teaser_ueberschrift_mitte{
position: relative;
background-color:#ccff00;
padding-top:5px;
margin: 0px 10px 0px 10px;
width:auto;
color: #2f343a;
font-size:16px;
font-weight:bold;
float:left;

}


Habt ihr vielleicht eine Idee?

Gruß
Jogi

[MrMurphy]

Hallo,

Falls der Text in der mitte größer wird soll der linke und der rechte Container verkleinert werden (also der Strich sollte kleiner werden) aber leider klappt das nicht.

Das ist in HTML / CSS auch nicht vorgesehen, deshalb wird es dafür keine Lösung geben.

Container können nur auf den eigenen Inhalt reagieren, nicht auf den Inhalt nebenstehender Container.

Gruss

MrMurphy

[jogibaer]

Hast du eine Idee wie man das realisieren könnte?

ich bin echt am verzweifeln, es muß doch eine Lösung geben.

[jogibaer]

Hallo MrMurphy,

erstmal vielen Dank für deine Antwort. Habe das Problem selbst gelöst.

ich habe einfach zwei absolute Container mit der gleichen Positionierung gesetzt und dann mit z-index die Inhalte überlappt.

Trotzdem vielen Dank für die schnelle Antwort.

Gruß Jogibaer