Question

I have the following less.css ( http://lesscss.org/ ):

#content {
    overflow: hidden;
    width: 100%;

    p {
        float: left;
        width: 465px;
        padding: 0px 25px 0px 35px;
        margin: 0px;

        br {
            line-height: 2.5em;
        }
    }

    pre {
        float: none;
        overflow: hidden;
        padding: 0px;
        padding-left: 10px;
        margin: 0px;

        &:after {
            clear: both;
        }
    }
}

… and the following HTML:

        <div id="content">
            <p>This code prints the text 'Hello World!' to a console window and then closes the application. The return 0 part of the application is irrelevant.</p>
            <pre>
//somecode { }
            </pre>

            <p>Highlights a single chunk of CoffeeScript code, using Pygments over stdio, and runs the text of its corresponding comment through Markdown, using the Github-flavored-Markdown modification of Showdown.js.<br/>
            We process the entire file in a single call to Pygments by inserting little marker comments between each section and then splitting the result string wherever our markers occur.</p>
            <pre>
//somecode { }
            </pre>
        </div>

The idea of the previous CSS is that the tags are automatically aligned to the right and the regular text is left to the main column so that it acts as a kind of annotation. If either columns are larger than the other, it will dynamically expand before starting the next group of p and pre elements.

The problem I have is that when I have multiple paragraph elements due to the way they float left with fixed width they tend to overlap each others lines. This has forced me to add my own breaklines, which is silly and I’d really like to get rid of it 🙁

Example (correct):

Example (incorrect):

Can anyone offer a solution so that the paragraphs will align together like the first picture except using actual paragraph tags and not the makeshift br I’m using currently. Containing the paragraphs in another parent div is not an option, as the output that is being displayed is straight from tinymce, which saves groups of text as raw p/pre tags for text and code respectively.

Answer 1

How about:

p {
    float: left;
    clear: left;

I guess that wouldn’t quite achieve the same layout you’ve got there. Unfortunately, if you’re getting rid of the <br>s, I think you need groups of paragraphs to be inside another tag that’s floated left to achieve your layout, and as you’ve said, that isn’t an option.