Centering floated elements with custom width

Question

Today I am facing a big problem with centering floated elements that have set custom width. For better explanation I made a snippet for you:

body { text-align: center; }
.square {
    width: 20%; height: 100px;
    background: cornflowerblue;
    float: left;
}

.container {
    display: inline-block;
}

<div>
  <div class="container">
    <div class="square">a</div>
    <div class="square">b</div>
    <div class="square">c</div>
  </div>
</div>
<br>
<div>
  <div class="container">
    <div class="square">a</div>
    <div class="square">b</div>
    <div class="square">c</div>
    <div class="square">d</div>
    <div class="square">e</div>
  </div>
</div>

The problem is that first three squares get shrinked after centering.

The reason why I am floating the elements is that the second container has to be same as first container and it must contain 5 elements (to cover full width of document). Here is how it looks like without floating (see the gabs between elements):

body { text-align: center; }
.square {
    width: 20%; height: 100px;
    background: cornflowerblue;
    display: inline-block;
}

.container {
    display: block;
}

<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
    </div>
</div>
<br>
<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
        <div class="square">d</div>
        <div class="square">e</div>
    </div>
</div>

Now the elements have right width, but the second line doesn't cover width of document because of the gabs between elements.

Is there any way to have floated elements with custom width centered? Which styles I should use for container element?

square should be inline block and no float, container should be display block. — Salman A, Nov 17 '16 at 19:25
Have you tried adding width:auto in container style and give padding:20px in square to see squares — Nirjhar Vermani, Nov 17 '16 at 19:29
@NirjharVermani That is not exactly what I wanted because I wanted squares being exactly 20%x100px. — PDKnight, Nov 17 '16 at 19:38
@PDKnight I'm just curious why elements should be floated? If you need them 20%, then you have to set some width to parent element. — Vel, Nov 17 '16 at 19:39
@NirjharVermani The result doesn't seem to act as being working: https://jsfiddle.net/vdjk8jd0/4/ — PDKnight, Nov 17 '16 at 19:52
You can't center floats. Floats were not designed to be used for layout. Floats do nasty stuff like becoming out-of-flow, which most probably you don't want. I don't recommend using floats for this. Of course inline-blocks were not designed for layout neither, so you get some spaces between if you are not cautious. If you can, you should use flexbox, which was designed to do this kind of things. — Oriol, Nov 17 '16 at 20:24

Vel · Accepted Answer · 2016-11-17T20:07:12.650

1

OK, I think I got what you need

.square {
width: 20%; height: 100px;
background: cornflowerblue;
display: inline-block;
font-size: 1rem;
}

.container {
display: block;
font-size:0;
}

jsfiddle

edited Nov 17 '16 at 20:07

answered Nov 17 '16 at 19:26

Vel

731
4
15

I will edit my post for better explanation. – PDKnight Nov 17 '16 at 19:28
I've edited my code – Vel Nov 17 '16 at 20:21
That's it, I totally forgot about whitespace between elements (because I've used it years ago). Thank you! Also, this HTML trick works too ;) https://jsfiddle.net/vdjk8jd0/5/ – PDKnight Nov 17 '16 at 20:23

Nirjhar Vermani · Answer 2 · 2016-11-17T19:48:22.763

0

body { text-align: center; }
.square {
  width: 20%; height: 100px;
  background: cornflowerblue;
  float: left;

}

.container {
width:100%;
margin-right:20%;
margin-left:20%;
}

Are you looking for something like this?

edited Nov 17 '16 at 19:48

answered Nov 17 '16 at 19:32

Nirjhar Vermani

1,215
8
17

Try to give a look at my edited post :) – PDKnight Nov 17 '16 at 19:45

jafarbtech · Answer 3 · 2016-11-17T20:30:30.190

0

Add min-width:7px; this will solve your issue

body { text-align: center; }
.square { 
    width: 20%;
    height: 100px;
    background: cornflowerblue;
    float: left;
    min-width:7px;
}

.container {
    display: inline-block;
}

<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
    </div>
</div>
<br>
<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
        <div class="square">d</div>
        <div class="square">e</div>
    </div>
</div>

Here your 5 div row era is also working.

edited Nov 17 '16 at 20:30

answered Nov 17 '16 at 19:38

jafarbtech

6,842
1
36
55

Almost. The elements must be having width set to 20%. – PDKnight Nov 17 '16 at 19:46
but why is it so? – jafarbtech Nov 17 '16 at 19:58
As explained above, I need last row of squares covering full width of document and they must have same width (so, 100%/5=20%). – PDKnight Nov 17 '16 at 20:01
I have added the exact thing in the fiddle https://jsfiddle.net/7uotuarr/ . I hope this will help you – jafarbtech Nov 17 '16 at 20:23
Nah, the elements doesn't have width of 20%. – PDKnight Nov 17 '16 at 20:25
check now, i have updated the answer – jafarbtech Nov 17 '16 at 20:31
No. Anyways, this question is actually solved. – PDKnight Nov 17 '16 at 20:33
ok. but what is the problem in this solution? – jafarbtech Nov 17 '16 at 20:34
Your elements still don't have 20% of width of document. – PDKnight Nov 17 '16 at 20:39

Centering floated elements with custom width

3 Answers3