How can I adjust DIV width to contents
HtmlCssLayoutHtml Problem Overview
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/
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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
Solution 3 - Html
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.
Solution 4 - Html
Try width: max-content to adjust the width of the div by it's content.
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
Solution 5 - Html
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/</strike>
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;