How can I make the text of this div wrap?

Question

I have a simple HTML structure that looks like this:

<div class="container"> <div class="caption"> <div class="title">This is a very, very long title!!!</div> <div class="details">Details</div> </div> <div class="content"></div> </div> 

I very simply formulated this:

 .container { min-width: 200px; } .caption { overflow: hidden; } .title { float: left; } .details { float: right; } .content { height: 200px; background-color: #c0c0c0; } 

What does it look like:

If I hide the window enough, in the end, the div "details" will be moved to the next line:

What I would like to do is text inside the “heading” of the div in the next line, but save both the “heading” and the “details” in one line (not wrapping).

Sort of:

 This is a very, very Details long title!!! +----------------------------------+ 

With title only wrap when space is not enough when resizing a window.

Can someone point me in the right direction to achieve this?

Here is the jsFiddle from the above code if anyone is interested.

Edit: To clarify, I would not want to specify a fixed width for .title, if possible. In most cases, I would like this div to be as wide as it needs.

Answer 1

this should work:

http://jsfiddle.net/KV8UW/

 <div class="container"> <div class="caption"> <div class="details">Details</div> <div class="title">This is a very, very long title!!!</div> </div> <div class="content"></div> 

 .container { min-width: 200px; } .caption { overflow: hidden; } .details { float: right; } .content { height: 200px; background-color: #c0c0c0; } 

Answer 2

Use the mapping for your layout: http://jsfiddle.net/3nBDd/15/

 .caption { display:table; width:100%; } .title { display:table-cell; text-align: left; } .details { display:table-cell; text-align right; } 

Answer 3

Expand your Div title as shown below and it will wrap the text.

 .title { float: left; width: 100px; //or whatever you want } 

or

 .title { float: left; width: 20%; //or whatever you want }