Input field sneaks into a div with labels in IE 11

Question

CSS:

.container {
    margin-right: 75px;
    float: left;
    position: relative;
}
.input-large {
    width: 210px;
}
.label-a {
    float: left;
}
.label-b {
    float: right;
}

HTML:

<div class="container">
    <div>
        <label class="label-a">label-a</label>
        <label class="label-b">label-b</label>
    </div>
    <input class="input-large" type="text" />
</div>

Result in IE 11 and Chrome (screenshot)

Why the input field is placed between two labels in IE 11, but in Chrome it is fine?

score 1 · Answer 1 · edited Mar 17 '20 at 14:32

1

.container {
    margin-right: 75px;
    float: left;
    position: relative;
    width:215px;
}
.input-large {
    width: 210px;
}
.lablerow{float:left;width:100%;}
.label-a {
    float: left;
}
.label-b {
    float: right;
}

<div class="container">
    <div class="lablerow">
        <label class="label-a">label-a</label>
        <label class="label-b">label-b</label>
    </div>
    <input class="input-large" type="text" />
</div>

edited Mar 17 '20 at 14:32

halfer

19,824
17
99
186

answered Mar 13 '20 at 12:45

vadivel a

1,754
1
8
18

Yup, thanks, that will work. I was able to do it via flexbox, I just wonder why it happens in IE. – realpepega Mar 13 '20 at 12:48
Can you refer this https://stackoverflow.com/questions/18019450/css-flexbox-not-working-in-ie10 – vadivel a Mar 13 '20 at 12:51
Yeah, I'm aware of flexbox compatibility on IE, but simple justify-content space between works for labels. I'm curious about what actually makes that example display wrong in IE and correctly in Chrome. – realpepega Mar 13 '20 at 12:56

score 0 · Answer 2 · answered Mar 13 '20 at 13:02

The size of the input element varies across the browsers. I have confirmed this by inspecting the elements in the browser. I believe IE might also view width differently to chrome eg. width of the content or width of the content and padding.

(Also if you are planning on using flex boxes I recommend also taking a look at CSS grid as an alternative because it works in 2D not just down the page).

score 0 · Answer 3 · answered Mar 16 '20 at 02:37

This seems due to IE and Chrome takes different widths of the container div.

In IE, the width of the container div is the sum width of input, label-a and label-b:

But in Chrome, the width of the container div takes the width of input:

As IE and Chrome have different rendering engines, they have different ways to calculate the element width. If we want the same display in IE, we need to set a width to the container.

Input field sneaks into a div with labels in IE 11

3 Answers3