Is it possible to size container by the width of only one of its children?

Question

Here is html:

<div class="container>
    <div class="header">
    </div>

    <div class="content">
    </div>

    <div class="footer">
    </div>
</div>

I want container to have the size of the content div. BUT I want the widths of header and footer be constrained by the size of the content/container.

display:inline-block alone does not work because container adapts its size to the widest child.

The width of the content is unknown so explicit width settings can not be set.

Here is the image explaining what behavior I need.

enter image description here

In other words: footer and header follow the width of container. Size of the content defines container width.

is the width variable? I don't know why you're not specifying the width wanted to the container div? — Carol McKay, Aug 12 '14 at 09:31
you can specify with of container explicitly with style="width: 1000px;", can also specify an "overflow". You also can set it on runtime using javascript if you dont know what width you want. — Tuncay Göncüoğlu, Aug 12 '14 at 09:32
Why not just do it the normal way and give each class it's own preferences? There's a reason it's a class and not an id :P — Bradly Spicer, Aug 12 '14 at 09:32
you will need to put a javascript tag on your question, because I think that is what you are going to need — Carol McKay, Aug 12 '14 at 09:33
@BradlySpicer it is a template for dialog window. I do not know the size of the content. — Pavel Voronin, Aug 12 '14 at 09:35
@voroninp if you don't know the size of the content, why don't you view source? or set a max-width then it won't extend the size you need :) — Bradly Spicer, Aug 12 '14 at 09:37
I've read and re-read but it still isn't clear, could you maybe provide some illustrations? — SW4, Aug 12 '14 at 09:40
@CarolMcKay Max width is set for container. But I want container to become smaller if content occupies few space. but footer and header must follow the size of the content. — Pavel Voronin, Aug 12 '14 at 09:40
@voroninp I have an idea but the header and footer should have an explicit `height` :/ — Hashem Qolami, Aug 12 '14 at 09:56
@voroninp You could remove the header and footer from document normal flow and position them absolutely relative to their parent (*the container*) Then handle their dimensions by `left:0` and `right:0` declarations. Finally you should add a `padding` to the `.content` to push its content down. Here is the **[demo](http://jsbin.com/wizud/1/edit)**. — Hashem Qolami, Aug 12 '14 at 10:07
if its only two children you can definitely try [this](http://stackoverflow.com/questions/12747045/css-shrink-a-parent-div-to-fit-one-childs-width-and-constrain-the-width-of-th) — MIdhun Krishna, Aug 12 '14 at 11:47

score 0 · Answer 1 · answered Aug 12 '14 at 11:38

You can use some Javascript to do that. Like so:

var size = $('.content').width(); // To get the width of the content element
$('.container').width(size); // To set the width of the container to the width of the content, overriding any CSS rules

It's a bit rough in terms of code, but it will get you started.

Is it possible to size container by the width of only one of its children?

1 Answers1