Say, a parent div has two child divs, one containing text, the other containing an image of known (but variable) width & height.
I would like
I have a working version that does what I want until the quantity of text in the second child pushes the parent div's width wider than that of the image.
Here's my code:
css:
#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}
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>
and here's a jsfiddle: http://jsfiddle.net/BmbAS/1/
you can see where it's going wrong by clicking the 'lengthen/shorten text' link to increase the quantity of text
tldr - i want all the divs to be the same width which is equal to the width of the image
ps. modern browser solution only necessary
The solution is to simply not declare width: 100% . The default is width: auto , which for block-level elements (such as div ), will take the "full space" available anyway (different to how width: 100% does it).
Method 1: First method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div. Consider this HTML for demonstration: HTML.
To move the inner div container to the centre of the parent div we have to use the margin property of style attribute. We can adjust the space around any HTML element by this margin property just by providing desired values to it. Now here comes the role of this property in adjusting the inner div.
You could simply set the container to flexbox. Another option would be using CSS table, some extra HTML code is needed. And max-height doesn't work with table layout, so use height instead. Show activity on this post.
See this edited version of your jsFiddle.
Here's what's added to the CSS:
#container {
display: table-cell;
}
#child1 {
display: table-row;
width: 1px;
}
#child2 {
display: table-cell;
width: 1px;
}
The answer provided by @Chris leads me to the following, great solution of my case, where I need to fit the container div only to the first child element (and leave the rest child elements to auto fit to the container's width):
div.container {
width: fit-content;
max-width: 100%;
margin: 16px auto;
display: table;
}
div.inner-primary {
display: block;
}
div.inner-rest {
margin-top: 8px;
display: table-caption;
caption-side: bottom;
}
<div class="container">
<div class="inner-primary"><div style="width:200px; border:1px dotted #ccc; border-radius:4px; padding: 4px;">This is the main element that drives the width of the container.</div></div>
<div class="inner-rest">This is the first of the rest divs that fit automatically to the container...</div>
<div class="inner-rest">This is the second element...</div>
</div>
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