Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css - shrink a parent div to fit one child's width and constrain the width of the other child [duplicate]

Tags:

css

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

  • the width of the first child (image-containing) div to shrink to fit the width of the image (this i can do)
  • the parent div (of unspecified width) to shrink to fit the width of the image-containing div (this is ok too)
  • the text-containing second child div (also of unspecified width) to match the parent div's width irrespective of the quantity of text it contains (this is where it gets tricky).

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

like image 653
caitriona Avatar asked Oct 05 '12 13:10

caitriona


People also ask

How do I make a div take the width of a parent?

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).

How do you fit a child div inside a parent div?

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.

How do I fit a div to another div?

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.

How do you stop a child div from overflowing parent 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.


2 Answers

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;
}
like image 72
Chris Avatar answered Oct 18 '22 07:10

Chris


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>
like image 36
pa4080 Avatar answered Oct 18 '22 09:10

pa4080