How can I make a div's contents wrap without setting an explicit width?

I want to have a series of posts with titles and other information. The problem is, depending on how much space the containing div has and how long the titles are, it is causing my "post-summary" (title, date, etc) div to wrap to the next line making it look like:

Here is what it is doing:

Here is what I want it to do (note the title wrapped, but didn't cause the whole "post-summary" to wrap to the next line like in the previous example):

I don't care how much the title wraps or how many lines it wraps开发者_如何学JAVA to. I just don't want it to force the parent div which also contains the post-info to drop below the post number like it does in the first example.

I've created an example jsfiddle to further illustrate what I'm doing: http://jsfiddle.net/aZvVU/6/

How can I make the post-titles simply wrap when it doesn't have enough space and not cause it to make the whole "post-summary" div from dropping to the next line? I don't want to make the title width fixed if I can avoid it.

You can use this as a starting point http://jsfiddle.net/A8csU/

HTML:

<div id="parent">
    <div id="right-child">
        <p>Right stuff.</p>
    </div>
    <div id="left-child">
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It  has roots in a piece of classical Latin literature from 45 BC, making it  over 2000 years old. Richard McClintock, a Latin professor at  Hampden-Sydney College in Virginia, looked up one of the more obscure  Latin words, consectetur, from a Lorem Ipsum passage, and going through  the cites of the word in classical literature, discovered the  undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33  of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by  Cicero, written in 45 BC. This book is a treatise on the theory of  ethics, very popular during the Renaissance. The first line of Lorem  Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section  1.10.32.</p>
    </div>
</div>

CSS:

#left-child {
 border: 1px solid red;
    margin-right: 102px; /* 100px + 1px border + 1px border */
}

#right-child {
    width: 100px;
    border: 1px solid blue;
    float: right;
}

You can just make a few tweaks to your code like so:

.post-list
{
    float: left;
    margin-right: 250px;  /* make sure it doesn't touch your right-nav*/
}

.right-nav
{
    background-color: #c0c0c0;
    padding: 10px;
    min-height: 300px;
    width: 200px;
    position: absolute; right: 0px; top: 0px; /* position it */
}

Here is a working example, with your code http://jsfiddle.net/YumSP/

edited to fix title wrapping http://jsfiddle.net/YumSP/1/

Drop the floating on .post-summary, you don't need it and it is causing your wrapping. Then add margin-left: 40px; to .post-summary to ensure that there is room for the .post-number and give the illusion of a full height column for the .post-number without having to muck about the heights.

To sort out the navbar, drop the floating from .post-list and kill off your clearing <div>s. If you want the navbar to take up a whole column then add a margin-right:220px to .post-list.

For example:

• http://jsfiddle.net/ambiguous/tGQeJ/1/ (without 220px right margin)
• http://jsfiddle.net/ambiguous/tGQeJ/2/ (with has the 220px right margin)