css : prevent div width from expanding to available width

Question

How can I prevent div from expanding? I want div with elements not to take 100% of available space and have width that it's children have. I need this for centering parent div horizontally. The trick is that child elements should share float:left or diplay: inline-block and fluid width, so there can be few rows of child elements.

I can not wrap each row in its own div since it will break responsive design.

Solution 1

You should use display: table; It will shrink to the size of it's contents and can also be centered and positioning without having to assign a given width.

DEMO http://jsfiddle.net/kevinPHPkevin/9VRzM/

Solution 2

You can set the width property of the children to fit-content. Doing so will make these elements take up only as much horizontal space as they need and is available within the parent.

You can also set width to max-content but this will ignore the width of the parent and content will extend as far as any descendants need and possibly overflow the parent.

Example:

Problem setup:

.parent {
  width: 15rem;
  height: 5rem;
  border: 1px solid blue;
}

.child {
  border: 1px solid red;
}

<div class="parent">
  <div class="child">
    Content for child
  </div>
</div>

Solution:

.parent {
  width: 15rem;
  height: 5rem;
  border: 1px solid blue;
}

.child {
  width: fit-content;
  border: 1px solid red;
}

<div class="parent">
  <div class="child">
    Content for child
  </div>
</div>

Support for fit-content is pretty good (caniuse?). There's support for fit-content on pretty much all the major desktop browsers (except IE), and unknown support on some of the mobile browsers.

Solution 3

If you truly want the parent div to collapse around its child elements (for whatever reason, based on what you're trying to accomplish) and you then want to center that div, then @Vector's answer is spot on, use display: table with margin: 0 auto.

If it's ok for the div to remain expanded to the full width of the container in which you're trying to center your children, then you have at least a couple more options, again depending on your particular situation.

You can use text-align: center.

.content {
  text-align: center;
  border-style: solid;
  border-width: thin;
}

.content span {
  display: inline;
  border-style: solid;
  border-width: thin;
}

<div class="content">
  <div>Test</div>
  <div>Test</div>
</div>

You could also use the newer display: flex with justify-content: center, depending on the level of browser compatibility you're supporting, of course.

.content {
  display: flex;
  justify-content: center;
  border-style: solid;
  border-width: thin;
}

.content div {
  border-style: solid;
  border-width: thin;
}

<div class="content">
  <div>Test</div>
  <div>Test</div>
</div>

Comments

[random_user_name]

There's several possibilities: display:inline-block is good for this (be aware of the IE7 hack)

[Hashem Qolami]

Set display: inline-block to the parent and wrap it by a container has text-align: center;

[isherwood]

As this seems like a trivial problem, it might help to show your HTML so we can see what challenge you're facing.

[vlad]

Setting display:inline block doesn't prevent element from expanding if there are more than one row of child elements

[krilovich]

have you trying setting a static width as well as a max-width?

[leymannx]

Nowadays there's width: fit-content.

[defaultNINJA]

This should be a comment.

[vlad]

try setting float:left or display: inline-block to child elements, it will cause problems

[Marc Audet]

@vlad I actually tried setting float:left and display: inline-block and I don't see a problem. In these situations, the parent container will expand as much as it can to allow the child elements to fill the available width. You can constrain the width using the maximum-width property for the parent container.

[JoachimR]

still expands when more text

[Ryan H.]

This will collapse the div but it won't be (easily) centered.