How to get rid of empty space on the right of a container with floating items?

Question

When I use floating itens inside a container, like:

The Code (http://jsfiddle.net/tombrito/gx7kL330/7/):

.container {
  background: blue;
  position: absolute;
  width: auto;
}
.floating-box {
  float: left;
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 3px solid #73AD21;  
}

<div class="container">
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
  <div class="floating-box">Floating box</div>
</div>

...if I resize the window, I see that the width: auto of the container is not exactly the width of the contents:

There is some empty space on the right. Is there a way to make the container really be the width of the floating children, even when I resize it?

Try the answer to this question (http://stackoverflow.com/questions/18482505/having-the-floating-children-elements-determine-parent-width) but i think you'll struggle if you have more elements so that they wrap... — Stuart, Apr 07 '16 at 16:08
if you use bootstrap then it will be easy, or you can make a jquery function for it. — Murad Hasan, Apr 07 '16 at 16:09
Basically...no. That's not the way the line box model works. — Paulie_D, Apr 07 '16 at 16:16
Related - http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, Apr 07 '16 at 16:18
@Stuart those answers won't work for more the one line of elements, unfortunately. — The Student, Apr 07 '16 at 17:18
Indeed, as I said you'll struggle with multiple floated elements that wrap... You should really rethink what it is you're trying to achieve, there _will_ be an elegant way. — Stuart, Apr 07 '16 at 17:20
@Stuart it's a menu of box itens (box images). I can use other layouts if this don't work. But I really would like to use this one. — The Student, Apr 07 '16 at 18:16
Must you have fixed widths on each item? Or can they be flexible? — Stuart, Apr 07 '16 at 18:21
@Stuart must be fixed, the images size width and height, all same size (say, 100x100 pixels). — The Student, Apr 07 '16 at 19:11
In this case, can you not determine, and fix the width of the container? — Stuart, Apr 07 '16 at 19:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108567/discussion-between-tom-brito-and-stuart). — The Student, Apr 07 '16 at 20:14

score 0 · Answer 1 · answered Apr 07 '16 at 16:17

0

You can using flexbox rules. (source)

html:

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

css:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: red;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
}

answered Apr 07 '16 at 16:17

Jonathan Argentiero

5,687
8
29
34

No...not really you can't...even flexbox can't do that. It's not what the OP is looking for. – Paulie_D Apr 07 '16 at 16:18
That will distribute the boxes in the space, but I really would like to make the container small to fit the content size. Anyway, interesting to know about this property... :) – The Student Apr 07 '16 at 17:11

score 0 · Answer 2 · answered Apr 07 '16 at 16:24

If jQuery is an option, I would do something like this;

$('body').on('resize', function () { 
    var width = document.documentElement.clientWidth || window.innerWidth,
        itemWidth = 150 + 20 + 6; //width + margin + border,
        count = Math.floor(width / itemWidth),
        containerWidth = itemWidth * count;

    $('.container').css('width', containerWidth + 'px'); 
});

// untested code warning

How to get rid of empty space on the right of a container with floating items?

2 Answers2

Linked