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.

There's several possibilities: `display:inline-block` is good for this (be aware of the [IE7 hack](http://stackoverflow.com/a/6545033/870729)) — random_user_name, Aug 08 '13 at 19:44
Set `display: inline-block` to the parent and wrap it by a container has `text-align: center;` — Hashem Qolami, Aug 08 '13 at 19:44
As this seems like a trivial problem, it might help to show your HTML so we can see what challenge you're facing. — isherwood, Aug 08 '13 at 19:44
Setting display:inline block doesn't prevent element from expanding if there are more than one row of child elements — vlad, Aug 08 '13 at 19:47
have you trying setting a static width as well as a max-width? — krilovich, Aug 08 '13 at 19:49

score 17 · Answer 1 · answered Aug 08 '13 at 19:49

17

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/

answered Aug 08 '13 at 19:49

Kevin Lynch

24,427
3
36
37

try setting float:left or display: inline-block to child elements, it will cause problems – vlad Aug 08 '13 at 19:55
@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. – Marc Audet Aug 08 '13 at 20:08
still expands when more text – JoachimR Apr 01 '15 at 13:15

Henry Woody · Answer 2 · 2020-09-24T03:04:40.897

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.

score 3 · Answer 3 · answered Jun 24 '17 at 17:16

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>

score 1 · Answer 4 · edited Apr 11 '18 at 09:33

1

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

edited Apr 11 '18 at 09:33

Pablo Lozano

10,122
2
38
59

answered Aug 08 '13 at 19:43

mitch

1,821
14
14

This will collapse the div but it won't be (easily) centered. – Ryan H. Jun 24 '17 at 17:16

score 1 · Answer 5 · answered Dec 06 '22 at 17:09

If you modify DOM adding extra html elements inside a div and that cause it to be expanded, a simple solution would be to add that css to the root element of those extra html elements:

max-width: fit-content;

That will prevent them to expand the parent div's width.

css : prevent div width from expanding to available width

5 Answers5