容器的宽度由第二个孩子的宽度决定

Question

I have a container div with structure like below:

  <div class="container">
    <div class="title"> </div>
    <div class="content"></div>
    <div class="footer"></div>
  <div>

I want the width of .container depend on the width of content .

I found some solution such as FIDDLE DEMO

But it's not what I want. You can see if I change the order, the width still depend on the first child: FIDDLE DEMO2

EDIT

I may add some context, the title in my program is very long, I am OK if it will be broken in several lines. But if the width depends on the widest child( title ). there will be too much space for content . I think this DEMO may be more helpful.

Answer 1

This is possible but only by utilising display:table and associated properties like display:table-caption :

 .title { display: table-caption; caption-side: top; background: pink; } .container { position: relative; display: table; } .content { position: relative; display: table-row; background: lightblue; } .footer { background: lightgreen; display: table-caption; caption-side: bottom; } 

 <div class="container"> <div class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quam, rerum. Repellat quasi, quis voluptatum!</div> <div class="content">This section determines the overall width of the structure.</div> <div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div> 

Answer 2

Try this

 .container { position : relative ;} 
 .title { position :absolute ;} 

Answer 3

.container{
    display: table
}