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  lt img gt  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

User · Answer

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

User · Answer

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

User · Answer

Try width  max-content to adjust the width of the div by it s content   lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt  div ex1     width 500px    margin  auto    border  3px solid  73AD21     div ex2     width  max-content    margin  auto    border  3px solid  73AD21     lt  style gt   lt  head gt   lt body gt    lt div class  quot ex1 quot  gt This div element has width 500px  lt  div gt   lt br gt   lt div class  quot ex2 quot  gt Width by content size lt  div gt    lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

[html] How can I adjust DIV width to contents

Examples related to html

Examples related to css

Examples related to layout