Using CSS to set the display property to table-cell and converting it to a

I needed a SideMenu that would match the length of the content, but for some reason, using display:table-cell caused it to display:block in both Firefox and Chrome. What could be the reason behind this inconsistency?

.back-branded {
  background: #900;
  padding-top: 200px;
}

.sideMenu {
  padding-left: 0;
  padding-right: 5px;
  margin-top: 10px;
}

a.list-group-item:hover {
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.form-control {
  color: rgb(85, 85, 85);
  background: #eee;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.form-control:hover,
.input-group-addon:hover {
  color: rgb(85, 85, 85);
  text-decoration: none;
  background-color: #e1e1e1;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  cursor: pointer;
}

.container {
  background: #fcfdfd;
  border-style: solid;
  border-image: linear-gradient(to top right, #ddd 0%, #fff 50%) 1;
  width: auto;
  margin-left: 5px;
  margin-right: 5px;
}

.content {
  padding-right: 0;
  margin-top: 10px;
  padding-left: 5px;
}

.col-md-6,
.col-md-12 {
  padding: 5px;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.btn {
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  color: #454545;
  background: #f6f6f6;
}

.sideMenu,
.content {
  display: table-cell;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<body>
  <div class="col-md-12" style="display:table;">
    <div class="back-branded" style="display:table-row;"></div>
    <div style="display:table-row;">
      <div class="col-md-2 sideMenu" style="overflow: hidden;align-self:stretch;display:table-cell;">
        <div class="list-group">
          <div class="list-group-item" id="back-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon1">&#xE225;</span>
              <a class="form-control" aria-describedby="basic-addon1">Center verlassen</a>
            </div>
          </div>
          <div class="list-group-item" id="plan-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon1">&#xE046;</span>
              <a class="form-control" aria-describedby="basic-addon1">Dienstpläne</a>
            </div>
          </div>
          <div class="list-group-item" id="finance-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon2">&#xE030;</span>
              <a class="form-control" aria-describedby="basic-addon2">Abrechnung</a>
            </div>
          </div>
          <div class="list-group-item" id="user-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon2">&#xE004;</span>
              <a class="form-control" aria-describedby="basic-addon2">Benutzer</a>
            </div>
          </div>
          <span class="list-group-item" style="align-self:stretch"></span>
        </div>
      </div>
      <div class="col-md-10 content">
        <div class="row">
          <div class="col-md-12">
            <div class="container">
              <!--Hier kommt eine ganz lange Liste-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

To view this on JSFiddle: https://jsfiddle.net/pickbreaker/fas55qfs/1/#&togetherjs=D4V6y9nTm9

Object Inspector Screenshots: https://i.sstatic.net/KgHS4.png https://i.sstatic.net/WwKh7.png

htmlcss

Answer №1

Your table-cell can be seen in Firefox as well (the display:block is overridden), and it matches the height of the other cell. In my example, I gave the table-cells a yellow background for visibility (as well as added some text inside).

However, it seems like you're using Bootstrap classes for the elements inside, which may not be the most logical choice...

.back-branded {
  background: #900;
  padding-top: 200px;
}

.sideMenu {
  padding-left: 0;
  padding-right: 5px;
  margin-top: 10px;
}

a.list-group-item:hover {
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.form-control {
  color: rgb(85, 85, 85);
  background: #eee;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.form-control:hover,
.input-group-addon:hover {
  color: rgb(85, 85, 85);
  text-decoration: none;
  background-color: #e1e1e1;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  cursor: pointer;
}

.container {
  background: #fcfdfd;
  border-style: solid;
  border-image: linear-gradient(to top right, #ddd 0%, #fff 50%) 1;
  width: auto;
  margin-left: 5px;
  margin-right: 5px;
}

.content {
  padding-right: 0;
  margin-top: 10px;
  padding-left: 5px;
}

.col-md-6,
.col-md-12 {
  padding: 5px;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.btn {
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  color: #454545;
  background: #f6f6f6;
}

.sideMenu,
.content {
  display: table-cell;
  background: #ffb;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<body>
  <div class="col-md-12" style="display:table;">
    <div class="back-branded" style="display:table-row;"></div>
    <div style="display:table-row;">
      <div class="col-md-2 sideMenu" style="overflow: hidden;align-self:stretch;display:table-cell;">
        <div class="list-group">
          <div class="list-group-item" id="back-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon1">&#xE225;</span>
              <a class="form-control" aria-describedby="basic-addon1">Center verlassen</a>
            </div>
          </div>
          <div class="list-group-item" id="plan-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon1">&#xE046;</span>
              <a class="form-control" aria-describedby="basic-addon1">Dienstpläne</a>
            </div>
          </div>
          <div class="list-group-item" id="finance-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon2">&#xE030;</span>
              <a class="form-control" aria-describedby="basic-addon2">Abrechnung</a>
            </div>
          </div>
          <div class="list-group-item" id="user-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon2">&#xE004;</span>
              <a class="form-control" aria-describedby="basic-addon2">Benutzer</a>
            </div>
          </div>
          <span class="list-group-item" style="align-self:stretch"></span>
        </div>
      </div>
      <div class="col-md-10 content">
        <div class="row">
          <div class="col-md-12">
            <div class="container">
              Here comes a very long list, super, super long...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer №2

The issue has been identified. It seems that using display:table-cell does not go well with float:left. Therefore, I must now seek an alternative solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery mobile : accessibility helper for hidden elements

Within my HTML structure: <div data-role="fieldcontain" id="containdiv" class="no-field-separator"> <label for="field1" class="ui-hidden-accessible">To</label> <input type="search" name="field1" id="field1" autocorrect="off" a ...

javascriptjqueryhtmlcssjquery-mobile

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

javascriptjqueryhtmlcss

Can Bootstrap be used to create distinct spacing between table rows in a DataTable?

How can I achieve the look of separate table rows as shown in the image provided? I am currently using DataTables and bootstrap 5. I am looking to create visually distinct rows where the background is visible in between each row. Click here to view the i ...

htmlcssdatatablesbootstrap-5

using jquery to select elements based on their data attribute values

I have a question about using jQuery to select an object with a specific data value. For instance: $('[data-infos-parent_id=0]').html('it ok'); <div class="question" data-infos='{"parent_id":0,"my_id":0, "title":""}'> ...

jqueryhtmlobjectjquery-pluginsselector

Tips for incorporating a visible HTML comment in JSX code?

Currently implementing ReactJS and facing a requirement to insert visible HTML comments (visible in the html source) within JSX. Unsure of the correct approach to achieve this. A third party vendor necessitates this comment for processing purposes on the ...

htmlreactjscommentsjsx

How to Transform a Navigation Bar into a Carousel

I am creating a website that is designed to be responsive. Currently, I have a horizontal navigation bar which collapses into a drop-down menu when the screen size decreases. When each tag in the menu is clicked, a different image loads into a designated ...

jqueryhtmlcss

Tips for extracting designated link by employing a Selector CSS Query

Please note: While a similar question has been asked on JSoup:How to Parse a Specific Link, I have a more specific variation of this inquiry. Kindly read on for further details. In order to extract data from a particular site link, I am looking to utili ...

cssjsoup

Using Angular with OpenStreetMap and $routeProvider allows for dynamic routing and

Check out this awesome single page app that I found: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/simple-example.html However, I am looking to enhance it by adding a menu... <html ng-app="App"> <head> <lin ...

javascriptjqueryhtmlajaxangularjs

Using Ajax, the script triggers calls upon detecting keyup events on various input fields, each

I'm encountering issues while attempting to solve this logic puzzle. The page contains multiple fields and the goal is to store the input values in the database when the user finishes typing. Here's the code snippet: var debounce = null; ...

javascripthtmljqueryajax

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...

javascripthtmlcssscroll

Displaying PHP strings with spacesFeel free to let me know

I have two files named "index.php" and "output.php". In the index.php file, there is a dropdown list populated with all Italian city names fetched from a MySQL table. The objective of my test case is to select a city from the dropdown list and send its val ...

phphtmlmysqlweb

How can I stack a div on top of two columns in Bootstrap?

My goal is to design something like this: I want to have a single-color strip that extends over three columns: https://i.sstatic.net/1XfAu.png What I am aiming for is a layout where the grey line overlaps columns 2 and 3. /* added by editor for demo p ...

htmlcssbootstrap-4

The value calculated by Auto does not display as a valid number in Angular 8 until it has been manually edited

Having an issue with a form submission for invoicing. The total value field, which is auto-calculated based on quantity and unit price, does not show up as numeric data in the backend onSubmit event unless I manually interact with it by adding something ...

htmlangular

Three brothers and sisters - One must expand responsively while the remaining two maintain minimum content sizes

Attempting to outline the limitations at hand. We have 3 containers named .content, .left, and .bottom, along with a resize handler that governs the available space. I aim for the .container to expand as the space increases, utilizing all available area. ...

css

Difficulty in updating Vue variable value following a request

Hello everyone, I am facing an issue regarding a variable value. Within the request, I am comparing each array value to see if there is a match and then updating the match variable to true if a match is found. However, the problem arises when the updated ...

javascripthtmlvue.jsvuejs2frontend

Leveraging JSON data to dynamically create HTML elements with multiple class names and unique IDs, all achieved without relying on

Recently, I've been working on creating a virtual Rubik's cube using only JS and CSS on CodePen. Despite my limited experience of coding for less than 3 months, with just under a month focusing on JS, I have managed to develop two versions so far ...

javascripthtmlcssjsonrubiks-cube

How can I extract information from an HTML table using AngleSharp?

Seeking a way to extract song data from a playlist on a music streaming website This table contains song information: <tr class="song-row " data-id="ef713e30-ea6c-377d-a1a6-bc55ef61169c" data-song-type="7" data-subscription-links="true" data-index="0" ...

c#htmlcssanglesharp

Material UI Card shadow effect getting cropped

Currently experiencing an uncommon issue while using Material UI's Card component - the box-shadow is cut off on the top and bottom sides. Any suggestions on how to resolve this problem? Check out my code below: import React, { Component } from & ...

javascriptcssmaterial-ui

What is the best way to align paragraphs vertically within a required square-shaped div using CSS (with images for reference)?

I am trying to style a table in a specific way, but I'm facing some challenges. First, I want to make the internal div inside the table square with a percentage height. Next, I need to have two paragraphs stacked on top of each other within the same ...

htmlcssflexbox

Is there a way to modify this JavaScript code so that it can function with a

I have developed a unique audio player that plays random sections of different songs. Currently, it is hardcoded for one song with three intros, a midsection, and three outros. I am looking to create a system where a list of songs can be randomly chosen fr ...

javascripthtmlhtml5-audio