Hur gör jag det här i html/css?

Ja hur gör man det här bäst/snyggast/enklast
Bifogar en bild :)

<h2>Rubrik</h2>
<p>Text text text text text text text text text text text text text text text </p>
<h2>Rubrik</h2>
<p>Text text text text text text text text text text text text text text text </p>
<h2>Rubrik</h2>
<p>Text text text text text text text text text text text text text text text </p>
<h2>Rubrik</h2>
<p>Text text text text text text text text text text text text text text text </p>

h2 { float:left; clear:left; color:red; background:transparent; text-transform:uppercase; font-size:100%; }
p { margin-left:10em; }

Nåt sånt? :)

Ja tack, nästan... den första rubriken hamnar ovanför den första texten :P
Annars blev det ett önskvärt resultat.

Du kan justera 'margin-left' på P. :)

Jag får inte till det, den hamnar ovanför hur jag än gör...

Finns det något annat sätt att göra det här på?

Lägg till margin:0; på H2. :)

Jag ser nu att det blir en "3px jog" i IE, vilket löses genom att sätta hasLayout på P. Så:

h2 { [b]margin:0;[/b] float:left; clear:left; color:red; background:transparent; text-transform:uppercase; font-size:100%; }
p { [b]zoom:1;[/b] margin-left:10em; }

Vad har du tänkt att ha för innehåll sedan? Kanske skulle det passa med en definitonslista?

http://www.webforum.nu/showthread.php?t=130778