CODEWITHSUNDEEP
css
Evanss
Evanss

Reputation: 23593

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

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

Upvotes: 0

Views: 1438

Answers (3)

Paul Sullivan
Paul Sullivan

Reputation: 2875

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)

Upvotes: 3

Varinder
Varinder

Reputation: 2664

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/

Upvotes: 0

dimitris
dimitris

Reputation: 9

'.size{ float:left;}'

let me know if this helps.

Upvotes: 0

Related Questions