20

Say, a parent div has two child divs, one containing text, the other containing an image of known (but variable) width & height.

I would like

  • the width of the first child (image-containing) div to shrink to fit the width of the image (this i can do)
  • the parent div (of unspecified width) to shrink to fit the width of the image-containing div (this is ok too)
  • the text-containing second child div (also of unspecified width) to match the parent div's width irrespective of the quantity of text it contains (this is where it gets tricky).

I have a working version that does what I want until the quantity of text in the second child pushes the parent div's width wider than that of the image.

Here's my code:

css:

#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}

html:

<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>

and here's a jsfiddle: http://jsfiddle.net/BmbAS/1/

you can see where it's going wrong by clicking the 'lengthen/shorten text' link to increase the quantity of text

tldr - i want all the divs to be the same width which is equal to the width of the image

ps. modern browser solution only necessary

acdcjunior
  • 132,397
  • 37
  • 331
  • 304
caitriona
  • 8,569
  • 4
  • 32
  • 36

3 Answers3

28

See this edited version of your jsFiddle.

Here's what's added to the CSS:

#container {
    display: table-cell;
}
#child1 {
    display: table-row;
    width: 1px;
}
#child2 {
    display: table-cell;
    width: 1px;
}
Chris
  • 26,544
  • 5
  • 58
  • 71
5

The answer provided by @Chris leads me to the following, great solution of my case, where I need to fit the container div only to the first child element (and leave the rest child elements to auto fit to the container's width):

div.container {
    width: fit-content;
    max-width: 100%;
    margin: 16px auto;
    display: table;
}

div.inner-primary {
    display: block;
}

div.inner-rest {
    margin-top: 8px;
    display: table-caption;
    caption-side: bottom;
}
<div class="container">
  <div class="inner-primary"><div style="width:200px; border:1px dotted #ccc; border-radius:4px; padding: 4px;">This is the main element that drives the width of the container.</div></div>
  <div class="inner-rest">This is the first of the rest divs that fit automatically to the container...</div>
  <div class="inner-rest">This is the second element...</div>
</div>
pa4080
  • 531
  • 9
  • 16
-2

If you're willing to use a little javascript (jQuery in this example), you could set the width of the text div with the width of the image div.

Try adding $("#child2").css({'width': $('#child1').width()}); to the end of the JS in your fiddle, or check out the fork here: http://jsfiddle.net/VXEMu/

CommissarXiii
  • 87
  • 3