Make Div as wide as it needs to be

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.

@Hans no tables for layout. You are lucky comments can't be downvoted. — Madara's Ghost, Aug 29 '11 at 14:30
@Ryan see the **[XY Problem](http://www.perlmonks.org/index.pl?node_id=542341).** — Madara's Ghost, Aug 29 '11 at 14:32
a title and text below it are tabular data in a way. At least I wouldnt be afraid to use it in this case. Especially since it works fine here — Hans Wassink, Aug 29 '11 at 14:34
Well, you could use jQuery to compute the width of the title and use that to set the width of the box. It's a bit like using a sledgehammer to swat flies, though. — Blazemonger, Aug 29 '11 at 14:36
Do you have a screenshot or something as to what you want your desired effect to be? — Kyle, Aug 29 '11 at 14:38

mjisrawi · Accepted Answer · 2011-08-29T15:02:36.207

29

Is this (jsFiddle) what you're trying to accomplish?

I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.

Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.

edited Aug 29 '11 at 15:02

answered Aug 29 '11 at 14:38

mjisrawi

7,846
3
24
27

3

I regret that I have but one vote to give to this solution. Bravo. – Blazemonger Aug 29 '11 at 14:42
2

In chrome this is just expanding to the width of the window, not constrained by the width of the title. – James Montagne Aug 29 '11 at 14:48
@jeroen It doesn't shrink down. It EXPANDS to larger titles. – mjisrawi Aug 29 '11 at 14:50
@kingjiv it's working fine for me in Chrome, Safari, and Firefox – mjisrawi Aug 29 '11 at 14:51
1

Using chrome 13, if you expand the window size larger than the title the text continues to the edge of the screen. – James Montagne Aug 29 '11 at 14:56
@kingjiv that can be remedied by adding something like width: 100; this way it will never be smaller than 100px, but will always grow to exactly the width of the title span. No matter the width of the browser window. I'll updated my answer to say that. – mjisrawi Aug 29 '11 at 15:00
+1 Nice, setting an unrealistic width; reminds me of the 99% width settings when using tables years ago :-) – jeroen Aug 29 '11 at 15:06
Cool! @jeroen, haha yeah I know what I mean. I guess you can look at it as if you're setting a minimum width to preserve appearances. An article with a one word title would look pretty bad if the div could shrink to any arbitrary size. :) – mjisrawi Aug 29 '11 at 15:08
@mjisrawi Yep, that's exactly the effect I wanted :) I was already manipulating the display property with jquery (the div is actually a tooltip) so I just had to change display:block to display:table and it works perfectly. – Ryan Aug 29 '11 at 15:28

score 3 · Answer 2 · answered Aug 29 '11 at 14:41

3

A working jQuery example:

http://jsfiddle.net/8AFcv/

$(function() {
    $(".box").width($(".title").width());
})

answered Aug 29 '11 at 14:41

Blazemonger

90,923
26
142
180

Disclaimer: I make no claims about this being the best solution. As I said above, it's using a sledgehammer to swat a fly. But it works with no side effects. – Blazemonger Aug 29 '11 at 14:57
While javascript and jquery were not mentioned, this does appear to be the only working solution (except perhaps the other similar jquery solution). – James Montagne Aug 29 '11 at 14:59
1

Oh, and please note that I'm using class names, just as Ryan did, so if there's more than one `box` and `title` it will give unexpected results. IDs would be preferable: http://jsfiddle.net/8AFcv/1/ – Blazemonger Aug 29 '11 at 15:05

score 2 · Answer 3 · answered Aug 29 '11 at 14:27

2

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

answered Aug 29 '11 at 14:27

Madara's Ghost

172,118
50
264
308

That doesn't do what he wants at all, the heading goes way outside the box and the box stays a static 300px. – James Montagne Aug 29 '11 at 14:30
This is called the [XY Problem](http://www.perlmonks.org/index.pl?node_id=542341), what he (probably) wants, is for the header to no wrap, and for the text to wrap, so he figured, I'll just make the div wide and narrow at the same time! However, that is not the proper solution for the initial problem. **This one is**. :) – Madara's Ghost Aug 29 '11 at 14:32
THIS IS the correct solution—just leave out the 300px-width and it works fine: http://jsfiddle.net/feeela/LVk7w/1/ @kingjiv "it looks terrible" Maybe because it's an example in a frame that is less then a fourth of the available screen size… – feeela Aug 29 '11 at 14:39
Of course it is, it is intensified to show the result, obviously the actual website display will be much more subtle. The example is meant to be extreme to show the difference clearly. – Madara's Ghost Aug 29 '11 at 14:40
No it´s not, if the title is less than 100% of the containing block it does not work, the OP wants the whole box to have a specified minimum width OR the exact width of the title if it´s more. – jeroen Aug 29 '11 at 14:43
@feeela no, that does not do what the question is asking either. See mjisrawi's jquery example for the intended result. The content should be constrained to the width of the title. – James Montagne Aug 29 '11 at 14:44
@jeroen Then for goods sake, add a min-width… [at]kingjiv there is no jQuery example by mjisrawi, there is one by Sergey Volosevich, which does exactly the same as the answer by Rikudo Sennin, but using unnecessary JS… – feeela Aug 29 '11 at 14:47
@feeela just make the title longer than the min-width but shorter than the containing box and you will see that the box still expands to 100% width: http://jsfiddle.net/LVk7w/4/ (your fiddle, title changed) – jeroen Aug 29 '11 at 14:51
@feeela sorry copied the wrong name. mblase75 is what I meant, and it does not do the same thing as riku's solution. Riku's solution has a title which is around twice as wide as the content (in chrome). I think in old versions of IE this would work, having the container expand, in chrome at least riku's solution has a title which goes 400px outside of a 300px box – James Montagne Aug 29 '11 at 14:52
Well, you don't have read my initial comment: "just leave out the 300px-width" – feeela Aug 29 '11 at 14:55
@feeela A div with no width has a 100% width which is not what he wants. See mblase75's fiddle for the desired effect. – James Montagne Aug 29 '11 at 15:00
@kingjiv Your div is not expanding to contain the title - the title is going over the edge of the div. – Ryan Aug 29 '11 at 15:22
@feeela Your div is simply 100% of the width available to it, it is not constrained by the width of the title span. – Ryan Aug 29 '11 at 15:23
@Ryan I think you meant Riku, I didn't post a solution. – James Montagne Aug 29 '11 at 15:29
@Ryan yes, that's the point. It's usually pointless to change the width of the div in cases like this, since you only want one element to not wrap, it's probably best if it breaks out of the box, this allows your box to maintain proper width and allow more options for layout. – Madara's Ghost Aug 29 '11 at 15:31

score 1 · Answer 4 · answered Aug 29 '11 at 14:38

1

If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:

$('.text').width($('.title').width())

and run it at jQuery(document).ready or by event if you add it dynamically

answered Aug 29 '11 at 14:38

Sergey Volosevich

379
2
11

The effect could be accomplished with CSS alone. – Madara's Ghost Aug 29 '11 at 14:41
Upvoted because it was the first reasonable (javascript...) solution, but please note that it won´t work exactly like this as you are setting the width of a span and you can only set the width of block-level elements. – jeroen Aug 29 '11 at 15:13

score 0 · Answer 5 · answered Aug 29 '11 at 14:43

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.

Make Div as wide as it needs to be

5 Answers5

Linked