Make child div text content NOT expand its parent fixed-positioned div's width

Question

I am working on kind of a popup. Its structure is very simple and is as follows:

<div class = "popup">
    <div class = "upper">
        <img src = "http://www.tapeta-mis-galazki-koala.na-pulpit.com/pokaz_obrazek.php?adres=mis-galazki-koala&rozdzielczosc=128x128" />
    </div>
    <div class = "description">This is a very interesting description of what you can see above.</div>
</div>

with styles of

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
}
.popup .upper {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid;
    padding: 5px;
    display: inline-block;
}
.popup .upper img {
    display: block;
}

and here is a fiddle with the code applied.

As you can see, the div.popup is positioned as fixed to the body.

What I want to achieve is to make the div.description NOT extend its parent div.popup width when it contains much text, instead it should wrap the text to be multilined and be of width of the div.popup. The div.popup width should be determined by the div.upper width and its content. In other words I mean to have div.description's width AT MOST of the div.upper's width, regardless to its (div.description text content).

EDIT

There's this little difficulty: the image content is not static and may be dynamically changed so the width is not constant.

Is that even possible to achieve that with CSS?

it looks like you want to figure out the width of `image` then add that width to fixed element `.popup` — suhailvs, Oct 25 '13 at 08:34
It is exactly what I forgot to mention: the image content and its width may vary :( — patryk, Oct 25 '13 at 08:38

score 3 · Accepted Answer · edited May 23 '17 at 12:24

3

http://jsfiddle.net/de6fr/1/ - a basic example of how to fix

You're basically using popup as a container, which means that if you want to retain its width, that's what you have to work on. I used the max-width property with .popup like this:

.popup {
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    display: table;
    width: 1px;
}
.popup > div { 
    display: table-row;
}

.popup .upper {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid;
    padding: 5px;
}
.popup .upper img {
    display: block;
}

Update - Flexible

http://jsfiddle.net/de6fr/4/

The fix for making it flexible is to use a CSS hack, which basically changes the nature of the element to a table

The nature of CSS (cascading style sheets) means that it's pretty hard to get a parent DIV to take the size of a child div without some crazy ideas involved. However, there's nothing preventing a "table" with a really small width doing that, as per this code:

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    display: table;
    width: 1px;
}
.popup .upper {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid;
    padding: 5px;
    display: table-row;
}
.popup .upper img {
    display: block;
}
.popup .description {
    display: table-row;
}

edited May 23 '17 at 12:24

Community

1
1

answered Oct 25 '13 at 08:31

Richard Peck

76,116
9
93
147

It would be highly appreciated as I forgot of the most important thing that I have just added to my question with an edit. I hope it is still somehow possible to make it work the way I want. – patryk Oct 25 '13 at 08:40
Did not get notified about your edit, that is a shame. Still this is really impressive how well it works :D yet is it something that people call 'cross-browser'? What am I doing is targeting multiple browsers, including older ones. – patryk Oct 25 '13 at 09:44
No problem! Tables are the oldest HTML tag known to man, so I guess it's a question of whether older browsers support display: table in CSS. Here is [some info](http://www.w3schools.com/cssref/pr_class_display.asp) about this: `Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.` – Richard Peck Oct 25 '13 at 10:25
Then I can say it is enough as I am denying ie7-and-lower users. Thank you for your help again :D – patryk Oct 25 '13 at 10:27
No problem buddy! If you need any more help, please just ask! – Richard Peck Oct 25 '13 at 10:28

Sid M · Answer 2 · 2013-10-25T08:37:00.333

0

Add a CSS property to your popup class and Give it a width

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    overflow:scroll;
    width:400px;
}

edited Oct 25 '13 at 08:37

answered Oct 25 '13 at 08:30

Sid M

4,354
4
30
50

The scrolls do not convince me as it needs to look elegant. And there's this thing I forgot to say which is that the image is dynamic. – patryk Oct 25 '13 at 08:48

score 0 · Answer 3 · answered Oct 25 '13 at 08:30

You have not defined the width for fixed element so add some width to your fiexed element

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    width: 100%;
}

here is the demo

Make child div text content NOT expand its parent fixed-positioned div's width

EDIT

3 Answers3

Linked