CODEWITHSUNDEEP
htmlcss
bradley4
bradley4

Reputation: 3938

How to make a parent div auto size to the width of its children divs

I'm trying to make the parent div only as wide as the child div's. Auto width is making the parent div fit the entire screen. The children divs will be different widths depending on their content so I need the parent div to adjust accordingly.

<div style='width:auto;'>
  <div style="width: 135px; float: left;">
    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>

    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>
  </div>

  <div style="width: 135px; float: right;">
    <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
      <dd style="white-space: nowrap;">3</dd>
    </dl>
  </div>
</div>

Upvotes: 128

Views: 257216

Answers (4)

Prasanna
Prasanna

Reputation: 4636

I was struggling with this and was setting the width of my parent component. As an accident, I found out the CSS width: fit-content;

Here is an example:

.outerContainer {
  width: 300px;
  height: 300px;
  background: gray;
}

.innerContainer {
  width: fit-content;
  border: 3px solid red;
}

.item {
  width: 200px;
  height: 200px;
  padding: 10px;
  background: blue;
}
  
<div class="outerContainer">
  <div class="innerContainer">
    <div class="item">
    </div>
  </div>
</div>

In the example the innerContainer div (the one with a red background) fits to the content of the item container. The outerContainer div is there to show the contrast.

Upvotes: 6

Riadh Bg
Riadh Bg

Reputation: 600

this is the easiest way to make your parent div inherit it's child width.

.container-fluid {
  border: 1px solid black;
  /*the needed css class to make your parent div responsive to it's children's max-width
  */
  width: max-content
}
.wrapper {
  border: 1px solid red;
  width: 300px
}
<div class="container-fluid">
  <div class="wrapper">xxx</div>
</div>

i hope someone finds this usefull

Upvotes: 60

Explosion Pills
Explosion Pills

Reputation: 191729

The parent div (I assume the outermost div) is display: block and will fill up all available width of its container (in this case, the body) that it can. Using a different display type -- inline-block is probably what you are going for:

http://jsfiddle.net/a78xy/

Upvotes: 38

Madbreaks
Madbreaks

Reputation: 19539

Your interior <div> elements should likely both be float:left. Divs size to 100% the size of their container width automatically. Try using display:inline-block instead of width:auto on the container div. Or possibly float:left the container and also apply overflow:auto. Depends on what you're after exactly.

Upvotes: 125

Related Questions