CODEWITHSUNDEEP
htmlcsscss-floatcss-position
vlad
vlad

Reputation: 1611

css : prevent div width from expanding to available width

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.

Upvotes: 32

Views: 76623

Answers (5)

Ahmet Firat Keler
Ahmet Firat Keler

Reputation: 4021

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.

Upvotes: 2

Henry Woody
Henry Woody

Reputation: 15652

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.

Upvotes: 23

mitch
mitch

Reputation: 1831

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

Upvotes: 1

Ryan H.
Ryan H.

Reputation: 7844

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>

Upvotes: 3

Kevin Lynch
Kevin Lynch

Reputation: 24703

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/

Upvotes: 20

Related Questions