Relativen Container umfließen

[Jormungand]

Hallo zusammen,
mit dem folgenden Szenario komme ich nicht weiter und hoffe, jemand von euch kann helfen.
Ich habe ein paar Container in dieser Konstellation:

<div id="container">
<div id="main">...</div>
<aside id="left">...</div>
<aside id="right">...</div>
</div>

Der aside id="right" Container soll halb in den main-Container hineinragen und die Schrift in main soll den right-Container umfließen. Siehe http://picload.org/thumbnail/lagordw/container.jpg

Ich habe es versucht, indem ich den main-Container auf 100% Breite gebracht habe und dem right-Container einen negativen margin-right gegeben habe aber jetzt schiebt der sich über die Schrift, anstatt sie zu verdrängen, obwohl er relativ ist.
Die Struktur der Seite kann ich leider nicht ändern, weil sie von Contao erzeugt wird.

Kann jemand helfen?

Schöne Grüße
Jormungand

 

[spacefront]

Hallo ich denke das wird schwirig, das wäre eher was für Float.
Du kannst aber die Seite schon ändern. Du must unter Tampltes das fe_page.html5 suchen. Dann kannst Du es anpassen. Wenn Du es nur auf einer Seite ändern willst musst Du halt mehrere Layouts anlegen.

 

[Jormungand]

Du meinst, ich müsste das Grundlayout ändern, dass z.B. der right-Container innerhalb des main-Container liegt und ihn dann float:right rechts anordnen und mit margin-left aus dem anderen Container raus verschieben?
Das probier ich heute mal aus und sag bescheid, wenn es klappt.
Danke erstmal für den Tipp!

 

[afr0kalypse]

Du hast aside Tags aber schließene /div Tags. Ist das so in deinem Source Code oder nur nen Fehler im Forum?
Kannst du mir bitte noch dein CSS zeigen, mit dem du es aktuell versuchst?

 

[Jormungand]

Den Quelltext habe ich schnell aus Firebug rauskopiert und das schließende Tag nachträglich (versehentlich falsch) eingefügt. Natürlich muss es </aside> heißen.

 

[afr0kalypse]

schau mal hier:
http://jsfiddle.net/ANT2Z/18/

 

[Jormungand]

Danke afr0kalypse, aber so sieht es im Moment schon aus.
Was ich versuche hinzubekommen ist das umfließen des rechten Containers, d.h. wenn im Hauptcontainer der Text länger wird, fließt er, nach dem aside Container bis zum Rand.
Ich habs versucht, im Bild oben darzustellen.
________________________________
@spacefront: Über Templates > Neues Template habe ich das fe_page.html5 dupliziert, umbenannt und meine Änderungen gemacht. Wie binde ich das jetzt ein?
Unter Themes > Seitenlayout findet sich zwar in den Experteneinstellungen der Punkt Seitenlayout. Aber das neue Template wird nicht angezeigt.

 

[afr0kalypse]

Achso. Dann musst du aber den aside Tag im text haben.

<div id="#main">text text <aside>ein anderer text</aside>noch mehr text</div>

Ansonsten wirst du den Text nicht floaten können.

EDIT:
was auch geht ist das hier: http://jsfiddle.net/vxDe7/2/
dann musst du aber erst dein aside Tag definieren und dann den text.

 

[Jormungand]

Damit scheint es html/css-technisch zu gehen.

#container {
                width:100%;   
            }
            #main {
                position:relative; /*nur um die position der beiden boxen besser zu zeigen*/
            }
            #main {
                background:#ccc;
                width:500px; 
                border:1px solid red;
                z-index:2; /*nur um die position der beiden boxen besser zu zeigen*/
                padding: 20px;
            }
            #right {  
                background:#666;
                width:200px;
                padding-left:-15%;
                margin: 20px -50px 20px 20px;
                z-index:1; /*nur um die position der beiden boxen besser zu zeigen*/
                float:right;
            }
            #right .inner {
                margin:20px;
            }

<div id="container">
            <div id="main"><aside id="right"><div class="inner">Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</div> </aside>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.sdfsdfsdfsdf<br />
                lksjdflkjslgkjslkdjfg<br />
                sldkfjlksdjflkjdslfkjlskdjfkljsd<br />
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

        </div>

Um die Verschiebung hinzukriegen habe ich noch das Padding-left missbrauchen müssen und einen inneren Container für den Abstand zum Rand verwenden müssen.
Jetzt muss ich nur noch in Contao die Container umstellen können, dann komm ich klar.

Danke für die Hilfe!

 

[afr0kalypse]

Hast du dir noch mal meinen vorigen Beitrag angesehen? http://jsfiddle.net/vxDe7/2/
Ist etwas schlanker und funktioniert auch

 

[Aelfry]

#container {
                width:100%;  
            }
            #main {
                position:relative; /*nur um die position der beiden boxen besser zu zeigen*/
            }
            #main {
                background:#ccc;
                width:500px;
                border:1px solid red;
                z-index:2; /*nur um die position der beiden boxen besser zu zeigen*/
                padding: 20px;
            }
            #right { 
                background:#666;
                width:200px;
                padding-left:-15%;
                margin: 20px -50px 20px 20px;
                z-index:1; /*nur um die position der beiden boxen besser zu zeigen*/
                float:right;
            }
            #right .inner {
                margin:20px;
            }

Du ersetzt du schönen Prozent Werte durch fixe Angaben?
Schau dir doch mal die zweite Lösung von afr0kalypse an: weniger Code und vor allem sauberer gelöst.

 

[emet]

Bei padding links und rechts muss man je nach Verschachtelung auf die Addierung insbesondere vom IE achten.

Also ähnlich wie oben beschrieben.

Nur besser von der rechten Seite mit -margin arbeiten. Das ist immer sicherer.

Div(ausen) formatieren
Div(innen) formatieren mit Größe, Hintergrund etc - natürlich float-right und von rechts mit -margin aus dem äußeren Container rauslaufen lassen.