div takes more width than needed when elements floated

Question

I have the following html structure:

<div class="container">
    <div class="square_container">
        <div class="square">
            box1
        </div>
        <div class="square">
            box2
        </div>
        <div class="square">
            box3
        </div>
        <div class="square">
            box4
        </div>
        <div class="square">
            box5
        </div>
    </div>
</div>

This is my CSS:

.square_container{
    display:inline-block;
}
.square{
    background-color:red;
    height:150px;
    width:150px;
    float: left;
    margin:20px;
}

The container-class is the bootstrap container. This is a screenshot of how it looks on a large screen:

The squares are in a line and they are centered (just like i want it)

So now I am making the browser window smaller and this is what happens:

The squares are floating, thats why the 4th square is breaking to a new line. But they are not centered anymore... The square_container is wider than it should as you can see on the 2nd picture. So I tried to clear after the the third manually. Then the square_container took only the width it needed and was centered again.

My question is: Can clear dynamically? I don't know at which element its breaking. Is there another solution where my square_container is just as wide as the elements inside?

Thanks for your help!

Possible duplicate of [CSS when inline-block elements line-break, parent wrapper does not fit new width](http://stackoverflow.com/q/34995740/1529630). If the wrapper prefers to be as wide as 5 squares but there is less available space, its width will be the full available space, not the maximum width of contents among lines. — Oriol, May 04 '16 at 19:59
Thanks for telling me the obvious... I know what the problem is, I was asking for a solution ;) — ant45de, May 04 '16 at 20:06
@ant45de, try inline-block with media queries: http://stackoverflow.com/a/32811002/3597276 — Michael Benjamin, May 04 '16 at 20:08
Shrink-to-fit works like this. There is no CSS solution other than hardcoding with media queries. — Oriol, May 04 '16 at 20:08
no jquery solutions wanted, sry^^ but i think im gonna go with media queries. — ant45de, May 04 '16 at 20:22

score 4 · Answer 1 · answered May 04 '16 at 20:01

4

I would solve this using flexbox and it makes this a lot simpler just make this change to your CSS

.square_container {
display: flex;
flex-wrap:wrap;
}
.square{
    background-color:red;
    height:150px;
    width:150px;
    margin:20px;
}

you don't need any floats now and boxes will try to fit as best as they could and if not enough space then they will drop to a new row..

answered May 04 '16 at 20:01

Dhaval Chheda

4,637
5
24
44

Might consider `inline-flex` – Aziz May 04 '16 at 20:03
Thanks a lot, but display:flex might not be available in some browser (even ie11 has only partial support), do you have another solution? – ant45de May 04 '16 at 20:04
1

@ant45de, unless you want support for IE 8 and 9, flexbox has [pretty broad support](http://caniuse.com/#search=flexbox). Nonetheless, this solution doesn't address the root problem. The container will not shrink-wrap the layout after items wrap. – Michael Benjamin May 04 '16 at 20:06
What about setting up media-queries that make the right squares clear for different screen solutions? – ant45de May 04 '16 at 20:09
I don't think you can achieve the alignment described in the question, even with flexbox. – Oriol May 04 '16 at 20:10
I tried out a few things with flex-boxes and when using inline-flex the same problem as i described occurs. When i use display flex my square-container takes its parents width, not the width depending on the content (which makes centering it useless)... – ant45de May 04 '16 at 20:24

Adam Buchanan Smith · Accepted Answer · 2016-05-04T20:23:52.940

1

edit As commented below, I think this might be what you are looking for, I used media queries to set the box width, see fiddle: https://jsfiddle.net/5roaxfsj/1/

.square_container{
    display:inline-block;
    width: 950px;
    background-color: lightblue;
}
.square{
    background-color:red;
    height:150px;
    width:150px;
    float: left;
    margin:20px;
}
@media (max-width: 950px){
  .square_container{width: 760px}
}
@media (max-width: 760px){
  .square_container{width: 570px}
}
@media (max-width: 570px){
  .square_container{width: 380px}
}
@media (max-width: 380px){
  .square_container{width: 190px}
}

Use flex and center, that way when window gets smaller it automatically distributes the spacing between the boxes, see fiddle: https://jsfiddle.net/c259LrpL/21/

.square_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.square {
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 20px;
}

edited May 04 '16 at 20:23

answered May 04 '16 at 20:06

Adam Buchanan Smith

9,422
5
19
39

But the squares are centered. Instead, the should be aligned to the left, but inside a centered container. – Oriol May 04 '16 at 20:11
@Oriol So then what is the OP asking for? I might be a little off topic – Adam Buchanan Smith May 04 '16 at 20:13
Basically the answer is correct, but if the 4th square breaks in a new line, the 4th square should start at the same margin as the 1st square does. – ant45de May 04 '16 at 20:17
@ant45de see my edit, is that what you were looking for? – Adam Buchanan Smith May 04 '16 at 20:24
@Oriol I edited my answer, does this look right? if not, I am lost. – Adam Buchanan Smith May 04 '16 at 20:25
Yes, this is the same what I just did. The square_container should be centered so it should be: display:block; position:relative; margin: 0 auto; But thanks alot! – ant45de May 04 '16 at 20:29

Eugene Fedotov · Answer 3 · 2016-05-18T03:49:13.473

Edit: I noticed this is not what you're looking for. Try .center-content-block, which comes with Bootstrap. You'll have to make another container that changes widths depending on the media query. So you would have parent_container -> child_container -> squares. The child_container would be x width at the first resolution, then y width at next, then z at next, etc. Then you just use .center-content on the parent_container.

Side-note: you don't need display:inline-block; since you're already floating your squares.

First, the boxes were never centered in the first place (at least based on what I'm getting).

.square_container {} .square {
  background-color: red;
  height: 150px;
  width: 150px;
  float: left;
  margin: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="square_container">
    <div class="square">
      box1
    </div>
    <div class="square">
      box2
    </div>
    <div class="square">
      box3
    </div>
    <div class="square">
      box4
    </div>
    <div class="square">
      box5
    </div>
  </div>
</div>

Next, in order to center it you have three choices:

Set the container's width to a fixed value, then set the left and right margins to auto. (you probably don't want this choice)
Use Flex Box layout. This is the dynamic solution to resizing the container without the use of JavaScript. (my choice)

.square_container {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}
.square {
  background-color: red;
  height: 150px;
  width: 150px;
  float: left;
  margin: 20px;
}

<div class="container">
  <div class="square_container">
    <div class="square">
      box1
    </div>
    <div class="square">
      box2
    </div>
    <div class="square">
      box3
    </div>
    <div class="square">
      box4
    </div>
    <div class="square">
      box5
    </div>
  </div>
</div>

Use JavaScript.

I would use the Flex Box since it's the easiest and natively supported by browsers.

First: Thanks for your answer! The problem is that if the last element is in its own row (like 2 squares - 2 squares - 1 square), its centered. And I want the element(s) in the last row to be floated left. — ant45de, May 18 '16 at 07:13

div takes more width than needed when elements floated

3 Answers3