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.

Answer 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/

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

Answer 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>

Answer 4

have you tried using display: inline-block? DIV will take up 100% width because they are block elements.