Menu
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/
604
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
The width property in CSS specifies the width of the element's content area. This “content” area is the portion inside the padding, border, and margin of an element (the box model). In the example above, elements that have a class name of . wrap will be 80% as wide as their parent element.
fit-content as min- or max-widthYou can also use fit-content as a min-width or max-width value; see the example above. The first means that the width of the box varies between min-content and auto, while the second means it varies between 0 and max-content.
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
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
