I am trying to center a fixed width element on my page, ensuring that it stays centered if it fits within the page width but extends beyond the page if needed with scroll accessibility. I have almost achieved this, but the element overlaps with the sidebar.
1/ How can I center the large-fixed-grid (green element) if it fits inside the container/screen width, and if not, start it after the sidebar?
2/ Additionally, when I scroll horizontally to reveal the fixed width element, there is a gap between the top-header and the large-fixed-grid (red element). Is there a way to adjust the position of the top-header to eliminate this gap as I scroll horizontally?
The yellow element should remain centered on the original width without any scrolling, and it currently behaves as expected.
Despite trying various CSS configurations, I have been unsuccessful in getting this to work properly.
See the JSFiddle link for a visual representation: https://jsfiddle.net/7tg2jo69/
Image Example: https://i.sstatic.net/GU87N.png
Html:
<!DOCTYPE html>
<html>
<header class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row justify-content-center">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.justify-content-center {
justify-content: center;
}
.small-flexible-grid {
background: yellow;
width: 60%;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
height: 100px;
}
Update:
To address issue 1/, I removed the justify-content-center class and added margin: auto; to both .small-flexible-grid and .large-fixed-grid.