Create an HTML component that expands to fill any leftover space on the page, without using flex

Question

Create an HTML component that expands to fill any leftover space on the page, without using flex

In my current situation, I have two elements positioned side by side with dynamic widths based on their content. The element on the right needs to fill up as much vertical space as possible without a set width.

I am looking for an alternative to flexbox due to client complaints about browser compatibility issues, especially in Internet Explorer.

Below is a sample scenario where I want to achieve this layout effect:

.container {
  background-color: tomato;
  padding: 10px;
  overflow: auto;
  width: 700px;
}
nav {
  float: left;
  margin-right: 10px;
}
nav ul {
  background-color: blue;
}
nav ul li {
  display: inline;
  padding: 20px;
}
form {
  float: left;
  padding: 15px;
}

<div class="container">
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Blog</li>
      <li>Contact</li>
    <ul>
  </nav>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Submit</button>
  </form>
</div>

html css

Answer 1

Answer №1

Flexbox is great, but sometimes you may have to resort to using tables for older browsers that are no longer supported by Microsoft. When working with fluid columns, remember not to give a width and make the last column 100% wide;

table td:last-child {
  width: 100%;
  background-color: #aaa;
}

<table>
  <tr>
    <td>Some content</td>
    <td>Bigger&nbsp;content</td>
    <td></td>
  </tr>
</table>

On another note, Michael's solution is more elegant as it achieves the table effect using only CSS. This way, you can avoid dealing with the demands of supporting outdated technologies.

ul {display: table}
li {display: table-cell}
li:last-child {
  width: 100%;
  background-color: #aaa;
}

<ul>
  <li>Some content</li>
  <li>Bigger&nbsp;content</li>
  <li></li>
</ul>

Answer 2

Flexbox is great, but sometimes you may have to resort to using tables for older browsers that are no longer supported by Microsoft. When working with fluid columns, remember not to give a width and make the last column 100% wide;

table td:last-child {
  width: 100%;
  background-color: #aaa;
}

<table>
  <tr>
    <td>Some content</td>
    <td>Bigger&nbsp;content</td>
    <td></td>
  </tr>
</table>

On another note, Michael's solution is more elegant as it achieves the table effect using only CSS. This way, you can avoid dealing with the demands of supporting outdated technologies.

ul {display: table}
li {display: table-cell}
li:last-child {
  width: 100%;
  background-color: #aaa;
}

<ul>
  <li>Some content</li>
  <li>Bigger&nbsp;content</li>
  <li></li>
</ul>

Answer 3

Answer №2

If you want to create a layout that mimics flex parents and flex children with broader browser support, you can utilize display: table; for the parent and display: table-cell; for the children.

By setting the parent element to display: table; and the child elements to display: table-cell;, you can achieve the desired layout.

.container {
  background-color: tomato;
  padding: 10px;
  overflow: auto;
  width: 700px;
  display: table;
}

nav ul {
  background-color: blue;
}

nav ul li {
  display: inline;
  padding: 20px;
}

form {
  padding: 15px;
  background: #eee;
}

.cell {
  display: table-cell;
}

<div class="container">
    <nav class="cell">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Blog</li>
            <li>Contact</li>
        <ul>
    </nav>
    <form class="cell">
        <input type="text" placeholder="Search">
        <button type="submit">Submit</button>
    </form>
</div>

Answer 4

If you want to create a layout that mimics flex parents and flex children with broader browser support, you can utilize display: table; for the parent and display: table-cell; for the children.

By setting the parent element to display: table; and the child elements to display: table-cell;, you can achieve the desired layout.

.container {
  background-color: tomato;
  padding: 10px;
  overflow: auto;
  width: 700px;
  display: table;
}

nav ul {
  background-color: blue;
}

nav ul li {
  display: inline;
  padding: 20px;
}

form {
  padding: 15px;
  background: #eee;
}

.cell {
  display: table-cell;
}

<div class="container">
    <nav class="cell">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Blog</li>
            <li>Contact</li>
        <ul>
    </nav>
    <form class="cell">
        <input type="text" placeholder="Search">
        <button type="submit">Submit</button>
    </form>
</div>

Create an HTML component that expands to fill any leftover space on the page, without using flex

Answer №1

Answer №2

Similar questions

Issue with the MUI Autocomplete display in my form

Guide to creating a radio button with the appearance of a toggle button

Using focusout and clicking buttons do not effectively interact with child elements

What is the Best Way to Create a Smooth Border-Bottom Transition?

How to toggle between checked and unchecked states using jQuery within AngularJS?

Utilize a drop-down selector in JavaScript to search and refine the results

When the URL is modified, triggering an event to load

Radio buttons with multiple levels

The Angular ng-repeat directive is populating a list with items, but the parameters enclosed in double curly braces

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

Tips for causing a single span tag within a group of multiple tags to overflow its parent element

Adding a timestamp to the src URL in HTML: A step-by-step guide

Arrange the contents within a div with Bootstrap 4 for proper alignment

Removing an unnamed cookie

Customizing arrays in DataTables allows for creating new columns and displaying them in the table according to the specified customizations

I'm encountering an issue with the "z-index: -1" property in React

Is there a way to adjust the font size for the label in mat-step?

How can I maintain the state of an HTML checkbox in Django even after reloading the page?

Troubleshooting problem with custom Angular directive integrating KineticJS

By default, use jQuery to load the content of a div