Two days ago, I asked why some content that was separated into columns was getting pushed underneath another column, and received a very helpful answer from @Josie. This did the trick until I made a table, and for some reason it broke the display order.
Some background: By creating unequal columns with CSS, I've attempted to divide up the page into a large column with main content (.leftcolumn) and slimmer column (.rightcolumn) that serves as a sidebar. However, the sidebar is getting pushed underneath the main content unless I make the width of either column 2% less than what it is.
I tried switching the order of the tags as recommended by this answer, but this had no effect. I also tried to give a display: flex property to the main content [as suggested by answers here][2], but this only combined the two sample posts in the main content along one row while having no effect on the sidebar. Something else I tested was to assign position: relative to the main content and position: absolute to the sidebar, which was [the solution given by this answer][3], but this had no effect on the actual display. I also tried @rajneesh-tiwari's suggestion below to define z-index: 999 under the sidebar's parent container, but this, too, had no effect on the display.
Below is the code. For some reason, the sidebar breaks into the bottom of the table...
<head>
<style>
* {
color: black;
font-family: Arial, sans-serif;
}
body {
background: gray;
padding: 5px;
}
.header {
background-color: white;
border-radius: 4px;
padding: 25px;
text-align: center;
}
.header h1 {
font-size: 50px;
}
.header p {
font-size: 15px;
font-style: italic;
}
.topnav {
background-color: #444;
border-radius: 4px;
display: flex;
justify-content: center;
overflow: hidden;
}
.topnav a {
color: white;
float: left;
max-width: 25%;
padding: 12px 16px;
text-align: center;
text-decoration: none;
width: 100%;
}
.topnav a:hover {
background-color: #eee;
color: black;
}
.topnav a:active {
background-color: #444;
color: white;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
background-color: white;
float: left;
padding-left: 20px;
width: calc(25% - 20px);
}
.card {
background-color: white;
border-radius: 4px;
margin-top: 20px;
padding: 20px;
}
.row:after {
clear: both;
content: "";
display: table;
}
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
padding: 0;
width: 100%;
}
}
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Weight Calculator</h1>
</div>
<div class="topnav">
<a href="index.html">Home</a>
<a href="calculator.html">Calculator</a>
<a href="solutions.html">Solutions</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<table>
<caption>Weight Calculator</caption>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
<tr>
<td>Jack</td>
<td id="jack" oninput="myFunction()">1</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="myFunction()">2</td>
</tr>
<tr>
<td>Joe</td>
<td id="joe" oninput="myFunction()">3</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById("jack").contentEditable = true;
document.getElementById("john").contentEditable = true;
document.getElementById("joe").contentEditable = true;
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
document.getElementById("total").innerHTML = total2;
}
myFunction();
</script>
<div class="rightcolumn">
<div class="card">
<h3>Test</h3>
<p>Text</p>
</div>
<div class="card">
<h3>Test</h3>
<p>Text</p>
</div>
<div class="card">
<h3>Test</h3>
<p>Text</p>
</div>
</div>
</body>Anyone know what I'm doing wrong? Any help is appreciated!
