Line break before last inline div in the line (div overflow)

Question

If four inline-block divs of 25% width are put into a container div - the last one always ends up on the next line. If you set the width to 24% - the divs would stay in line, as intended. I tested in latest Chrome

Like here - http://jsfiddle.net/n3aa3/

<div id="c">
    <div class="i">hello
    </div>
    <div class="i">i
    </div>
    <div class="i">love
    </div>
    <div class="i">u
    </div>
</div>

#c{
    background-color:purple;
    height:30px;
    padding:10px;
}
.i{
    border:1px solid white;
    display:inline-block;
    height:20px;
    width:25%;
}

Why? Is the margin between them (who did that margin?) is the reason?

score 1 · Answer 1 · answered Jul 03 '14 at 11:44

1

You want to add:

box-sizing: border-box;
-moz-box-sizing: border-box;

By default on most browsers, the width and height refer to the "contents" of a block, i.e. without padding or border. So when you say width: 25%, that means the total width is actually 25% + the padding + the border.

Also, you need to remove the white space between the end of a div and the start of another one, as it adds space between them.

answered Jul 03 '14 at 11:44

jcaron

17,302
6
32
46

jcaron that works! But i had to delete all whitespace between divs.. and lost all identation ([js fiddle](http://jsfiddle.net/n3aa3/7/)). Is there some hack to do this? using ::before and ::after?! – urmurmur Jul 03 '14 at 11:57
There's some discussion about it here: http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html The situation doesn't seem to have changed much, the best option seems to be `font-size: 0px` on the outer `div` (which means you need to reset it in inner elements). – jcaron Jul 03 '14 at 12:02

T J · Accepted Answer · 2014-07-03T12:00:01.040

1

Since inline-block are treated like inline elements (treated like text in simple words), The consecutive whitespace or line breaks among the inline-block elements in your html markup will be considered as a single whitespace.

You can remove the line breaks in markup to remove the whitespace between inline-block elements.

In your case though, the border also adds to the effective size of the element. You can change this behavior of default box model by applying box-sizing property.

Demo

edited Jul 03 '14 at 12:00

answered Jul 03 '14 at 11:46

T J

42,762
13
83
138

>Tilwin you are totally right but i loose the identation in markup! this is really strange, maybe we can say ask broswer to ignore \r\n's? – urmurmur Jul 03 '14 at 12:02
@user3616003 if ancient browser support is not an issue, instead of using `inline-block`, you can use [css3 flex](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), by simply applying `display:flex` to parent element like [this](http://jsfiddle.net/n3aa3/10/). – T J Jul 03 '14 at 12:07

score 1 · Answer 3 · answered Jul 03 '14 at 11:52

1

To continue Tilwin idea, you can see here several techniques to remove that spacing, i've used "parent font-size:0 child retablish font-size" technique, you can see updated version here

answered Jul 03 '14 at 11:52

AlexDom

701
4
14

Steve · Answer 4 · 2014-07-03T11:54:01.217

Borders are added to the total width:

.i{
    border:1px solid white;// <--This is your issue
    display:inline-block;
    height:20px;
    width:25%;
}

You can nest a div to fix this:

<div id="c">
    <div class="i"><div>hello</div>
    </div>
    <div class="i"><div>i</div>
    </div>
</div>

.i{

        display:inline-block;
        height:20px;
        width:25%;
}
.i div {
     border:1px solid white;
}

Also as noted by others, whitespace in inline elements effects the layout as well. Perhaps the best option would be to ditch inline-block and use floats instead:

<div id="c">
    <div class="i"><div>hello</div>
    </div>
    <div class="i"><div>i</div>
    </div>
</div>

#c {
       overflow:hidden;
       background-color:purple;
       height:30px;
       padding:10px;
}


.i{
     float:left;
     height:20px;
     width:25%;
}
.i div {
     border:1px solid white;
}

score 0 · Answer 5 · answered Jul 03 '14 at 11:51

0

try using float:left in place of display:inline-block

answered Jul 03 '14 at 11:51

aashi

492
3
11

score 0 · Answer 6 · answered Jul 03 '14 at 11:56

0

your .i class must have

.i{
    border:1px solid white;

    height:20px;
    width:25%; 
    float:left;/* <-- this*/
    box-sizing:border-box;/* <-- this*/


}

http://jsfiddle.net/vlrprbttst/n3aa3/6/

i don't understand why you are using display:inline-block though

answered Jul 03 '14 at 11:56

valerio0999

11,458
7
28
56

because `float`s have side effects, if you use `float` then you'll have to `clear` fix it. – T J Jul 03 '14 at 11:59
inline-block is good and self-declarative property. float is bad – urmurmur Jul 03 '14 at 12:01
@TilwinJoy inline-block also have side-effects :) everything has.. it depends on what you need. – valerio0999 Jul 03 '14 at 12:09
@vlrprbttst `inline-block` plays pretty straight forward… float will have plenty of side effects if you don't know how exactly it works in different situations… my favorite is `flex`, which also has slight drawback of browser support… well can't except more than that from web world :D – T J Jul 03 '14 at 12:12

Line break before last inline div in the line (div overflow)

6 Answers6