Make div of text only able to be as wide as its container

Question

HTML

<div class="cont">
<div class="size" id="size1"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>

<div class="cont">
<div class="size" id="size2"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>

CSS

.size {
    background-color: red;
    height: 100px;
    width: 100px;
}
#size2 {
    width: 200px;
}
.cont {
    padding: 10px;
    float: left;
}

I need div.cont's widths to be the width of their contained div.size (in my actual example div.size is an image and its with will vary in each instance).

This isnt happening as div.text takes up more space than its container, how can I stop this and make the text wrap?

JS Fiddle

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

3

Deleted all the previous stuff as I have (after doing some digging) found an exact duplicate with working solution.

My answer was also incorrect (as the op then specified the image MUST be allowed to be variable)

The answer is found on this jsfiddle and is an exact duplicate of css - shrink a parent div to fit one child's width and constrain the width of the other child

//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>
<br/>
<a id="longtext" href="#">lengthen/shorten text</a>

//css

#container{border:1px solid #f00;display:inline-block;margin:10px; display: table;}
#child1{border:1px solid #0f0;margin:10px; display: table-row; width: 1px;}
#child2{border:1px solid #00f;margin:10px; display: table-cell; width: 1px;}
img {border:1px solid #000;}

and basically it works using display:table-* (have a good read up)

edited May 23 '17 at 10:24

Community

1
1

answered Dec 08 '12 at 17:28

Paul Sullivan

2,865
2
19
25

I cant set the width of div.cont or any other containing div without javascript. Im using a CMS so the width of div.size (or the image) will vary, but the rest of the mark up needs to stay the same. – Evanss Dec 08 '12 at 17:54
then wrap a div around the content (i.e. make another container upon which you can set styles) – Paul Sullivan Dec 08 '12 at 17:57
If i put another div around the content and set its width then what happens when the image (which is dynamically provided by the CMS) is changed to one with a different width? – Evanss Dec 13 '12 at 15:25
Sorry to be fussy but I need the image dimensions to be unaltered. I dont want to change their widths. – Evanss Dec 14 '12 at 10:00
No problem - just dont add the .innercont img css then and the div will expand (and thus the text underneath also) to fit the width + margin/padding of the image. btw not constraining the image in any way will almost certainly cause you a lot of other headaches i.e. someone posts an image 2048 wide... bang your site now has horizontal scroll bars :s – Paul Sullivan Dec 14 '12 at 16:40
Can you link to a fiddle? I tried editing the one from your example but i cant get it to work with your comments. – Evanss Dec 17 '12 at 17:16

score 0 · Answer 2 · answered Dec 08 '12 at 18:21

0

'.size{ float:left;}'

let me know if this helps.

answered Dec 08 '12 at 18:21

dimitris

9
1
3

maybe you can post an example of what you need. – dimitris Dec 13 '12 at 11:52

score 0 · Answer 3 · answered Dec 09 '12 at 23:58

Expanding on Paul Sullivan's approach,

in your css:

.size {
  ...

    display:block; /*assuming its an image - making sure its block level*/

  ...
}

.cont {
  ...

    position:relative; /*add this to parent container if comming from cms*/

  ...
}

.text {
  ...

    position:absolute;
    top:100%; /*just to make sure content doesnt overlaps image*/

  ...
}

Just gives a plus point for getting content to stretch as wide as the image (plus padding)

Hope it helps,

Fiddle: http://jsfiddle.net/BKRsT/3/

Only downside is as the text is removed from the document flow you could have issues with overlap. Is there a solution without absolute positioning? — Evanss, Dec 10 '12 at 10:23

Make div of text only able to be as wide as its container

3 Answers3