How do I achieve the desired two-column layout with a sidebar and main content displayed side by side,
https://kalvinparker.github.io/test_website.github.io/
This is what my index.html and style.css looks like, I have wraped both elements in a container and applied flexbox properties to it.
HTML
<!DOCTYPE html><html><head><title>My Website</title><base href="https://kalvinparker.github.io/test_website.github.io/"><link rel="stylesheet" href="Assets/style.css"></head><body><div class="container"><div class="sidebar"><ul id="productList"></ul><div class="main-content"></div></body><script> fetch('products.json') .then(response => response.json()) .then(data => { const productList = document.getElementById('productList'); data.forEach(product => { const listItem = document.createElement('li'); const link = document.createElement('a'); link.href = `Products/${product.name}`; // Assuming Products folder link.textContent = product.name; listItem.appendChild(link); productList.appendChild(listItem); link.addEventListener('click', (event) => { event.preventDefault(); const mainContent = document.querySelector('.main-content'); fetch(link.href) .then(response => response.text()) .then(data => { mainContent.innerHTML = data; });}); }); });</script></html>CSS
.container { display: flex; } .sidebar { width: 15%; background-color: lightgray; /* For demonstration purposes */ } .main-content { flex: 1; /* Takes up the remaining space */ }