Hintergrundfarbe nicht über die gesamte Browserbreite

[Gunther]

Hallo Mike!

Super, ist ja richtig lebendig hier im Forum - gefällt mir!

Ja, manchmal entfacht eine vermeintlich "einfache" Frage eine angeregte Diskussion! :-)
Dein Beispiel zeigt auch wieder mal, dass die "Standard-Antwort" im Webdesign eigentlich immer ist:"Es kommt darauf an ...!" ;-)

Der Fachbegriff "Shrink to fit" war mir auch neu, dürfte aber genau das sein, was ich will.

Ja genau - soviel ist schon mal sicher ...!
Shrink-to-fit kann man im Prinzip auf 2 Arten erreichen:
1. per Float
2. per Display-Eigenschaft mit einem der 'inline' Werte

Ich habe jetzt mittels zweier Methoden von euren Tips genau das erreicht. Die Frage: Ist das schon optimales CSS/HTML für meinen Wunsch?

LÖSUNG 1:

<div style="backgrund:#eee; display:inline-block">
  <p>Das ist die erste zeile des 1.Absatzes<br>
  und auch noch die 2.Zeile
</div>

<p> <!-- wegen Absatzumbruch-->

<div style="backgrund:#eee; display:inline-block">
  <p>Das hier ist nun die erste Zeile des 2.Absatzes<br>
  und ebenfalls noch eine 2.Zeile
</div>

Nicht ganz. ;-)  
Das 'display: inline-block' den P-Elementen zuweisen. Das umschließende Div sorgt jeweils für die Erzeugung einer eigenen Blockbox (und kein leeres P-Element dazwischen basteln).  
  
  

> LÖSUNG 2:  
>   
> ~~~html
  

> <div style="backgrund:#eee; float:left;">  
>   <p>Das ist die erste zeile des 1.Absatzes<br>  
>   und auch noch die 2.Zeile  
> </div>  
>   
> <p style="clear:left;"> <!-- wegen Absatzumbruch-->  
>   
> <div style="backgrund:#eee; float:left;">  
>   <p>Das hier ist nun die erste Zeile des 2.Absatzes<br>  
>   und ebenfalls noch eine 2.Zeile  
> </div>  
> 

Auch schon dicht dran, aber du kannst die P-Elemente direkt floaten. Wenn ein Element gefloatet wird, wird dessen Display-Eigenschaft automatisch auf 'block' gesetzt. Um jetzt den Umbruch zu erreichen, muss das nachfolgende Element die entsprechende Clear-Eigenschaft zugewiesen bekommen.

Gruß Gunther