Div with display:table reserves 1px more

Question

I have four div's

<div id="blockContainer">
    <div id="blockA">LogInR</div>
    <div id="blockB">Logo</div>
    <div id="blockC">Search</div>
    <div id="blockD">Post</div>
</div>

and style is:

#blockA {
    border: 1px solid #f0f;
    display: table;
    width: 100%;
}
#blockB {
    border: 1px solid #f0f;
    display: table-cell;
}
#blockC {
    border: 1px solid #f0f;
    display: table-cell;
    width: 100%;
}
#blockD {
    border: 1px solid #f0f;
    display: table-cell;
}

So my blockA with width:100% reserves 1px more.

`1px` more than what? Try `box-sizing: border-box`, nut sure if this is what you mean. — Oriol, Jan 20 '16 at 16:20
what about another blocks, same issue? no idea what your issue, but maybe because of border: px ? btw, is your issue in all browsers? try to make border with 0px, does ur issue still exist. — Al-Mothafar, Jan 20 '16 at 16:21
try to make it `table-cell`, or change css with without `table-cell` or `table` and just make div floating and give a widths, your structure is make no sense ! — Al-Mothafar, Jan 20 '16 at 16:24
Possible duplicate of [width: 100%-padding?](http://stackoverflow.com/q/5219175/1529630) or [Can I stop 100% Width Text Boxes from extending beyond their containers?](http://stackoverflow.com/q/628500/1529630). — Oriol, Jan 20 '16 at 16:26
Aside: Using `table-cell` outside of a `table` is not a good practice. Although the specs say that it would create wrappers around itself. — Abhitalks, Jan 20 '16 at 16:27
@Abhitalks Using table-cell outside a table is not a bad practice. It will just generate an [anonymous one](https://www.w3.org/TR/CSS21/tables.html#anonymous-boxes). — Oriol, Jan 20 '16 at 16:29
@Oriol: Was editing my comment when yours came in! What I meant was if such divs are splattered across it would be confusing to find unintended layout results. — Abhitalks, Jan 20 '16 at 16:32

score 1 · Answer 1 · answered Jan 20 '16 at 16:23

This is because of the way browsers compute the size of a box. It's adding the width of the border to the 100% width. You need to change the way it computes with *{box-sizing: border-box;}:

*{box-sizing: border-box;}
#blockA {
    border: 1px solid #f0f;
    display: table;
    width: 100%;
}
#blockB {
    border: 1px solid #f0f;
    display: table-cell;
}
#blockC {
    border: 1px solid #f0f;
    display: table-cell;
    width: 100%;
}
#blockD {
    border: 1px solid #f0f;
    display: table-cell;
}

<div id="blockContainer">
    <div id="blockA">LogInR</div>
    <div id="blockB">Logo</div>
    <div id="blockC">Search</div>
    <div id="blockD">Post</div>
</div>

score 0 · Answer 2 · answered Jan 20 '16 at 16:24

Using width 100% and a border will make a 100% + border width element by default. Try using box-sizing.

#blockA, #blockB, #blockC, #blockD {
    box-sizing: border-box;
}

#blockA {
    border: 1px solid #f0f;
    display: table;
    width: 100%;
}
#blockB {
    border: 1px solid #f0f;
    display: table-cell;
}
#blockC {
    border: 1px solid #f0f;
    display: table-cell;
    width: 100%;
}
#blockD {
    border: 1px solid #f0f;
    display: table-cell;
}

<div id="blockContainer">
    <div id="blockA">LogInR</div>
    <div id="blockB">Logo</div>
    <div id="blockC">Search</div>
    <div id="blockD">Post</div>
</div>

Div with display:table reserves 1px more

2 Answers2