<script>
html { background-color: red; } # 0,0,0,1
html * { padding 5px; } # 0,0,0,1
body { background-color: gray; margin: 10px; border: 2px black solid; width: 450px; } # 0,0,0,1
p { margin: 5px; border: 2px solid black; } # 0,0,0,1
.left { float: left; } # 0,0,1,0
.right { float: right; } # 0,0,1,0
</script>
<p class="left" style="background-color: blue; width: 25%;">paragraph 1 and various other texts. with more filler: blagh blagh blagh blah</p> <p class="left" style="background-color: green; width: 25%">paragraph 2 and various other texts. with more filler: blagh blagh blagh blah</p> <p style="background-color: yellow; width: 25%;">paragraph 3 and various other texts. with more filler: blagh blagh blagh blah</p>
paragraph 1 and various other texts. with more filler: blagh blagh blagh blah
paragraph 2 and various other texts. with more filler: blagh blagh blagh blah
paragraph 3 and various other texts. with more filler: blagh blagh blagh blah