Here is an example of HTML markup with Bootstrap library included:
<div class="container">
<div class="card">
<ul class="nav list">
<li class="element">
<a href="#">Element</a>
</li>
<li class="element">
<a href="#">Another element</a>
</li>
</ul>
<div class="content">
<div>
First content
</div>
<div>
Second content
</div>
</div>
</div>
</div>
Also, take a look at the CSS code provided:
.container {
display: table;
layout: table-fixed;
}
.card {
display: table-row;
width: 300px;
}
li {
display: inline-block;
background-color: red;
padding: 20px;
}
.list {
display: table-cell;
width: 100px;
white-space: nowrap;
}
.content {
display: table-cell;
width: 200px;
background-color:blue;
height: 200px;
}
There seems to be some issue with how Firefox and Chrome are rendering this code differently. Firefox adds extra padding/margin to the table-cell div with navbar, causing misalignment with the content table-cell above. Here are screenshots showing the difference:
https://i.sstatic.net/vhbHq.png
https://i.sstatic.net/AUlIs.png
If anyone has encountered this problem with Firefox and Bootstrap before, any help would be greatly appreciated. Thank you in advance!
For a live demo, check out this link: https://jsfiddle.net/9cztjd6o/3/