Adjust div width to content with JS

Question

Setting display: inline-block should make the surrounding div not larger than its content: How to make div not larger than its contents?

However, when line-breaks are included it does not work (jFiddle)):

<style>
.container{
  border: solid;
  display: inline-block
}

.box{
  background-color: #08c;
  width: 50px;
  height: 50px;
  margin: 20px;
  display: inline-block;
}
</style>

<div class='container'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>

It is stated in CSS when inline-block elements line-break, parent wrapper does not fit new width that one can correct the width of the DIV with jQuery. How would you do it for this example?

Answer The question is marked as a duplicate, so I cant give an answer, but this worked for me (jFiddle):

<style>
.container{
  border: solid;
  display: inline-block;
}

.box{
  background-color: #08c;
  width: 50px;
  height: 50px;
  margin: 20px;
  display: inline-block;
}
</style>

<script>
function adjust(){
// reset container width
$('.container').width('');
var x = $('.container').width();

  // size of box is 90px (50+20+20), so set width to the minimal width which  // is dividible by 90px
  x= x - (x % 90);
  $('.container').width(x);
}

$(document).ready(function(){

adjust();

$(window).resize(adjust);
});
</script>


<div class='container'>
<div class='box'></div><!--
--><div class='box'></div><!--
--><div class='box'></div><!--
--><div class='box'></div><!--
--><div class='box'></div><!--
--><div class='box'></div>
</div>

Also since the boxes are inline-elements, I needed to remove the whitespace, otherwise they don't fit in the div.

I am getting all the boxes in a single line and outline around them. That's expected right? — Himanshu, Apr 19 '16 at 10:09
@Himanshu Yes, but if you make your window smaller and force a line break, you get a gap as in my image. How can I prevent this? — Adam, Apr 19 '16 at 10:10
Your `div.container`has `text-align: left`. Try to add `text-align: center;` for a better effect or maybe `text-align: justify;` — Rod, Apr 19 '16 at 10:14
Add a `min-width` to the `container`, it will not shrink. And there is a `;` missing is `display` property of `container`. — Himanshu, Apr 19 '16 at 10:16
@Paulie_D thank you for the link. I have edited my question, so that it is not a duplicate any longer. — Adam, Apr 19 '16 at 10:19
When content of wrapper div is more than div width and partially moves to 2nd line, wrapper becomes 100% width even if it is inline-block. — Julia, Apr 19 '16 at 10:20
It's still a duplicate and asking for a JS solution is off-topic unless you have tried to resolve this with your own code, — Paulie_D, Apr 19 '16 at 10:21

score 0 · Answer 1 · answered Apr 19 '16 at 10:14

0

Add min-width: 566px to your container:

answered Apr 19 '16 at 10:14

Repo

1,736
1
10
6

Changing the window size can again lead to a gap. Also I would like to get a solution that works if I change the width of the box elements. – Adam Apr 19 '16 at 10:21

Adjust div width to content with JS

1 Answers1