1

In Firefox this code renders Test and Test2 side-by-side, but in Chrome and IE Edge they are stacked vertically. Which is correct? And how can I make them side-by-side as in Firefox.

Code is as follows:

.grid,
.row,
.column,
.cell {
  box-sizing: border-box;
}
.column {
  vertical-align: top;
}
.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.cell {
  display: table-cell;
  margin: 0;
  vertical-align: top;
}
.half {
  width: 50%;
}
<fieldset class='row'>
  <legend class=title>Foo</legend>
  <fieldset class='cell half'>
    <legend class=subtitle>bar</legend>
    Test
  </fieldset>
  <fieldset class='cell half'>
    <legend>baz</legend>
    Test2
  </fieldset>
</fieldset>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
nwmcsween
  • 361
  • 2
  • 12

2 Answers2

2

In Firefox this code renders Test and Test2 side-by-side, but in Chrome and IE Edge they are stacked. Which is correct?

Based on these facts:

  • the row has a width: 100%,
  • there are two table cells, each with width: 50%,
  • the box model is set to box-sizing: border-box, and
  • margin spacing is set to 0

...it would appear that Firefox renders the layout correctly. Firefox aligns the table cells on the same row but Chrome wraps them onto two rows.

Except that fieldset is a special type of element.

fieldset doesn't accept changes to its display value like most other HTML elements. In fact, specifying display: table, display: table-cell or even display: flex to fieldset, will render elements unpredictably and unreliably.

And how can I make them side-by-side as in Firefox.

If you want to alter display values, you'll need to use elements other than fieldset or nest div / span elements as containers within fieldset.

For more details and workarounds see here:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

you can try adding float:left to class .half eg.

.half {
  width: 50%; float:left;
}
Shirish Dhotre
  • 145
  • 1
  • 4