tammi: Absolute Position, aber trotzdem umfließen lassen

Hallo Forum,

die Benutzer meiner Plattform, die ich gerade entwickle, haben die Möglichkeit, ihren geschriebenen Artikeln Eigenschaften zuzuordnen. Z.B. "Dieser Artikel richtet sich an".
Diese Eigenschaften möchte ich dann in der Artikelansicht als Box auf der rechten Seite darstellen. Ähnlich wie in Wikipedia-Artikeln, in denen die Bilder auch auf der rechten Seite dargstellt werden können, und der Text da herum fließt.

Ich habe einen all-umfassenden Container erstellt. Dieser sitzt horizontal mittig auf der Seite:

  
div.cont  
{  
 position:relative;  
 margin:2% 10% 0 10%;  
 padding:2%;  
 border:1px solid black;  
}  

In diesem div.cont wird eine Box mit folgendem CSS-Code für diese Artikel-Eigenschaften platziert:

  
p.box  
{  
 position:absolute;  
 right:0;  
 top:80px;  
 width:150px;  
 padding:5px;  
}  

Nun überlagert es den Artikel-Text. Der Text soll aber um ihn herum fließen. Also denke ich zuerst an float. Hier spuckt aber der padding-right von div.cont rein und verhindert, dass die Box direkt an den rechten Rand von div.cont platziert wird.

Wie bewerkstellige ich also diese Positionierung - direkt am Rand und doch mit umlaufenden Text?

MfG
tammi

  1. Hi,

    Nun überlagert es den Artikel-Text.

    Klar, bei absoluter Positionierung.

    Der Text soll aber um ihn herum fließen. Also denke ich zuerst an float. Hier spuckt aber der padding-right von div.cont rein und verhindert, dass die Box direkt an den rechten Rand von div.cont platziert wird.

    Du könntest sie über negatives margin-right ein Stück nach rechts ziehen.

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
  2. Diese Eigenschaften möchte ich dann in der Artikelansicht als Box auf der rechten Seite darstellen. Ähnlich wie in Wikipedia-Artikeln, in denen die Bilder auch auf der rechten Seite dargstellt werden können, und der Text da herum fließt.

    statt position:absolute --> float:right ?

    1. statt position:absolute --> float:right ?

      Scherzkeks, les doch bitte mein Posting komplett durch...