Fixing a discrepancy between chrome and firefox

What’s going on with chrome, and how would I fix that?
What seems to be the issue?

How come it shrunk inside chrome so the background is showing?

https://jsfiddle.net/0bofczwa/1/

chrome

firefox

The width is different, and you didn’t explicitly set any width on them. Play around with something like this, just make sure all the percentages add up to 100 of course: https://jsfiddle.net/armd6h58/

1 Like

It’s now off by 1 on chrome, what’s the issue there?
How would I fix that?
https://jsfiddle.net/ajq6b2rm/3/

.container-second [type="text"] {
  width: 200px;
}

.container-second [type="submit"] {
  width: 45px;
}

.container-second [type="button"] {
  width: 65px;
}

not good chrome

good firefox

The widths need to add up to .second-container's width (in this case 313px):
https://jsfiddle.net/2gf4rbs9/

1 Like

On a side note, you should probably change the following:

.container-right {
  float: left;
}

to:

.container-right {
  float: right;
}

to align the div containing Radio Inputs.

1 Like

I managed to fix my original code.
I’m not really sure what I did.

firefox / chrome both look the same now.
https://jsfiddle.net/2svmxznf/4/


.container-left {
  float: left;
}

.container-right {
  float: right;
}

.container-second {
  width: 311px;
  background: red;
  white-space: nowrap;
}

.radio-inputs {
  width: 129px;
  height: 30px;
  font-size: 22px;
  line-height: 1.3;
  text-align: center;
}

input[type=text] {
  width: 200px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 46px;
  font-size: 22px;
  margin-left: -4px;
}

input[type=button] {
  width: 65px;
  font-size: 22px;
  margin-left: -4px;
}