How can I adjust DIV width to contents

Question

I have a div element with style attached:

.mypost {
    border: 1px solid Peru;
    font-family: arial;
    margin: auto;
    min-width: 700px;
    width: 700px;
}

I am diplaying WordPress post contents inside the DIV block but for simplicity let assume that there is only one <img> inside the DIV. I want my div to be minimum 700 px wide and adjust the width if image is wider than 700 px.

What are my options to achieve that? Please advice.

UPDATE

See my Fiddle http://jsfiddle.net/cpt_comic/4qjXv/

possible duplicate: https://stackoverflow.com/questions/450903/how-can-i-make-a-div-not-larger-than-its-contents — blackgreen, Jan 11 '23 at 22:24

kapa · Answer 1 · 2013-11-13T10:25:19.247

95

One way you can achieve this is setting display: inline-block; on the div. It is by default a block element, which will always fill the width it can fill (unless specifying width of course).

inline-block's only downside is that IE only supports it correctly from version 8. IE 6-7 only allows setting it on naturally inline elements, but there are hacks to solve this problem.

There are other options you have, you can either float it, or set position: absolute on it, but these also have other effects on layout, you need to decide which one fits your situation better.

inline-block jsFiddle Demo

edited Nov 13 '13 at 10:25

answered Jun 02 '11 at 10:37

kapa

77,694
21
158
175

why wrong answer, you used width to reduce size in jsFiddle demo – Adeem May 08 '14 at 06:39
@Adeem Reread the question please. The inner div has a fixed width, and the outer div should be adjusted to the width of its contents, **but** should also have a `min-width`. My fiddle shows the state when the `min-width` is doing its job. Please experiment with the fiddle and see it is working (pro tip: increase the width of the inner element to `300px` and see what happens). – kapa May 08 '14 at 08:36

score 38 · Answer 2 · answered Feb 23 '17 at 15:09

38

I'd like to add to the other answers this pretty new solution:

If you don't want the element to become inline-block, you can do this:

.parent{
  width: min-content;
}

The support is increasing fast, so when edge decides to implement it, it will be really great: http://caniuse.com/#search=intrinsic

answered Feb 23 '17 at 15:09

Vandervals

5,774
6
48
94

1

That is brilliant! – J0ANMM Mar 14 '18 at 12:21
I had to modify a little to fit what I was needing; "width: max-content; max-width: 100%" – Haha Jun 07 '21 at 21:27

score 17 · Answer 3 · answered Jun 02 '11 at 10:34

You could try using float:left; or display:inline-block;.

Both of these will change the element's behaviour from defaulting to 100% width to defaulting to the natural width of its contents.

However, note that they'll also both have an impact on the layout of the surrounding elements as well. I would suggest that inline-block will have less of an impact though, so probably best to try that first.

score 1 · Answer 4 · edited Dec 01 '13 at 10:45

1

EDIT2- Yea auto fills the DOM SOZ!

#img_box{        
    width:90%;
    height:90%;
    min-width: 400px;
    min-height: 400px;
}

check out this fiddle

~~http://jsfiddle.net/ppumkin/4qjXv/2/~~

http://jsfiddle.net/ppumkin/4qjXv/3/

and this page

http://www.webmasterworld.com/css/3828593.htm

Removed original answer because it was wrong.

The width is ok- but the height resets to 0

so

 min-height: 400px;

edited Dec 01 '13 at 10:45

kapa

77,694
21
158
175

answered Jun 02 '11 at 10:24

Piotr Kula

9,597
8
59
85

1

This won't work. `width: auto` will make the div fill up the whole space. – kapa Jun 02 '11 at 10:43
Thanks but it does not keep minimum width. Remove the image and see. – Captain Comic Jun 02 '11 at 12:14

How can I adjust DIV width to contents

4 Answers4

Linked