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 */
}
New contributor
Kalvin Parker is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.