Dave Dave - 2 months ago 5
CSS Question

Even after adding "display:table" and "table-layout:fixed", I can't get Firefox to respect the "max-width" property

I was reading that Firefox and Opera will not respect the max-width property unless you add a “display:table” and “table-layout:fixed” into the containing DIV. So in my containing DIV I put

#loginArea {
border-radius: 25px;
font-family: 'russo_oneregular';
font-size: 20px;
padding: 20px;
background-color: #ffffff;
color: #000000;
display: table;
table-layout: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 580px;
}


However, on Firefox, the DIV is still not expanding to reach the 580 pixel max width — https://jsfiddle.net/4sjxum1k/11/ . How can I make it do that while still keeping the container centered in the middle of the screen (as well as the search elements in a single row)?

Answer

As your div is using absolute positioning, it has no default width and will only ever be as big as it needs to be to accommodate its contents, up to your specified max-width, or as small as it needs to be to fit the available space. To fix this so that it will always expand to fill the available space, up to your specified max-width simply add the width property giving it a value of 100% - no need for either of the table properties.

body {
  background-color: grey;
}
#loginArea {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width:100%; /* ADD THIS */
  max-width: 580px;
}
#searchForm {
  padding: 20px;
  background-color: orange;
}
.searchField {
  display: table-cell;
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  vertical-align: middle;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
}
<div id="loginArea">
  <div id="searchForm">
    Search For Results
    <br>
    <div style="vertical-text-align:center;">
      <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
        <input name="utf8" type="hidden" value="✓">
        <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:23%" />
        <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:23%">
        <input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width:40%">
        <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
      </form>
    </div>
  </div>
</div>