inside

with automatic element clearing

Go To StackoverFlow.com

0

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?

2012-04-04 03:20
by kvanberendonck
Personally I would restructure the markup, maybe using (in HTML5) articles to contain the paragraphs, and asides with pre elements to mark up the annotations. Your current markup seems rather fragile - BoltClock 2012-04-04 03:47


2

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.

2012-04-04 03:49
by mrtsherman
Better yet: throw away the clearfix. Use other elements already in the layout for clearance, or apply overflow: hidden or auto to the container div - BoltClock 2012-04-04 03:54
Found this nice article based on BoltClock's feedback - http://www.quirksmode.org/css/clearing.htm - mrtsherman 2012-04-04 03:58
Thanks for that @mrtsherman and BoltClock. Just to make sure; If I don't plan to put in any images or other block elements on the left column, could I use a left floating styled

instead of a styled

for the left part - kvanberendonck 2012-04-04 06:22
Yes, that would be fine @kvanberendonck. I updated my answer to reflect this - mrtsherman 2012-04-04 13:49