zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden position: absolute und float kombinieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.02.2017, 20:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.10.2004
Beiträge: 110
Greg5000 befindet sich auf einem aufstrebenden Ast
Standard position: absolute und float kombinieren

Hi,

ich möchte ein Blockelement (div1) absolut positionieren und in ein anderes Blockelement (div2) hineinragen lassen. Gleichzeitig möchte ich den Text in div2 um den hineinragenden Teil von div1 umfließen lassen. Da durch die absolute Positionierung von div1 die float-Eigenschaft nicht mehr wirkt, überlagert div1 aber leider den Text.

Ohne absolute Positionierung kriege ich aber meine gewünschte Position nicht hin, aber vielleicht hat hier ja jemand eine Idee. div2 ist der Hauptcontainer, in dem der ganze Inhalt steckt, er ist 900px breit und mittig ausgerichtet (margin: auto). div2 ist ein kleinerer Einschub, also z.B. ein Teaser für einen anderen Titel, ein hervorgehobenes Zitat oder ein Bild. div2 soll immer den linken Fensterrand berühren und gleichzeitig bis zur Mitte in div1 hineinragen.

Eigentlich soll es aussehen, wie im angehängten Beispielbild relative.png. Da wächst nur leider div2 nicht automatisch mit. Bei absolut.png ist div2 absolut positioniert, überlagert aber wie gesagt den Text.

In CSS sieht das Ganze mit position: relative; so aus:

Code:
#div1 {
  max-width: 900px;
  margin: auto;
  }

#div2 {
  float: left;
  background: #2C633A;
  color: #FCC500;
  position: relative;
  margin: 0 2em 1em -50%;
  width: 100%;
  text-align: right;
  font: 1em 'Roboto Condensed';
  display: flex;
  flex-direction: row-reverse;
}
Hat jemand eine gute Idee, wie ich das hinkriege?
Angehängte Grafiken
Dateityp: png absolut.png (374,5 KB, 5x aufgerufen)
Dateityp: png relative.png (374,7 KB, 5x aufgerufen)
__________________
Gruß, Greg
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Menueleiste anpassen Mulo CSS 1 04.02.2015 11:08
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:37 Uhr.