Question: To explain my problem, I'm trying to make a div wide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.

In other words:

**CSS:**

```
.box {
    min-width:170px;
}

.box span.title {
    font-size:24px;
    white-space: nowrap;
}

.box span.text{
    font-size:10px;
    white-space: normal;
}

```

**HTML:**

```
<div class="box">
   <span class="title">Title on one line</span><br />
   <span class="text">This is the main body of text which I want to wrap as
           required and have no effect on the width of the div.</span>
</div>

```

However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)

Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.

Answer: 
For headlines you should use the `<hN>` tags (`<h1>`, `<h2>` etc).

For no text wrap:

```
white-space: nowrap;

```

On the element who's text you don't want to wrap.

**[Working Example on jsFiddle](http://jsfiddle.net/RikudoSennin/LVk7w/)**
Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.

A pure CSS solution for this is unlikely without setting a max-width on the div.

A pointer on CSS:

* Don't include the tags in your selectors (i.e. `tag.class`) as you are then forced to use that tag with that class. Simply using `.class` will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.