I'm writing a portfolio site and I plan to annotate work with accompanying code, similar to how it is done here: http://jashkenas.github.com/docco/

I would like to use code exactly like this, as it works well with the CMS I made.

<p>
    Blah blah blah
    <code>
        Annotations
    </code>
</p>
<p>
    Another para
</p>
<p>
    Blah blah blah
    <code>
        Annotations
    </code>
</p>

Here is a picture I have drawn. Note the preferable markup that I am trying to achieve:

I've been unable to replicate something like shown by adding clear:both to my floated paragraph element(s). Can somebody help me create this layout so that it can be achieved using the markup I'm aiming for?

• html
• css

I know that you want to adhere to your posted layout, but there are several problems I foresee.

First and foremost, you are creating a very strange structure by having the text Blah blah blah and the code block as siblings. I don't think your layout is even possible with this syntax.

The second problem is that the paragraph tag, p, cannot contain block level elements. So you are severely limiting yourself to what content can be inside them when writing your pages.

I would change your structure to be something like this and then use floats to position.

div.parent { overflow: auto; } /* self clearing parent div */
p.left { float: left; width: 30%; } 
code.right { float: right; width: 70%; } 

<div class="parent">
     <p class="left">
        Text
     </p>
     <code class="right">Code</code>
</div>

This allows you to position encapsulated blocks of html with float left/right. It also allows you to make use of block level elements in your description areas. In addition, I would probably go in and add classes and encapsulate the code tags in a parent div also. But I think the example is pretty straightforward.