How to align this div beside a sidebar efficiently? - html

Question

I'm trying to put a fixed sidebar and then the main container side by side.
So the sidebar stays fixed like a side navigation bar, and the container can scroll up and down. kind of like the jsfiddle page. But with a scrolling content. There shouldn't be any gap between those two parent divs.
I tried this so far. But something is off. There is a huge gap between the sidebar and the content.
body {
max-width: 90%;
margin: 0 auto;
background-color: whitesmoke;
}
.sidenavbar {
/*max-width: 30%;*/
min-width: 19%;
min-height: 100%;
/*width: 200px;*/
position: fixed;
left: 0;
top: 0;
z-index: 1;
background-color: #fff;
color: #000;
}
.container {
float: right;
width: 71%;
overflow: auto;
}
.content {
margin: 0 auto;
/*padding: 2em 3em;*/
overflow: auto;
overflow-x: hidden;
}
<div class="sidenavbar">
<div class="brand">
<img id="logo" src="img.png" width="150px" alt="#">
</div>
</div>
<div class="container">
<div class="content">
<img src="img.png" alt="#">
<h1>Generated Content</h1>
<p>This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. </p>
<h2>Hello!</h2>
<p>
This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph.
</p>
</div>
</div>

Answer 1

You have done everything perfect, but using a width: 71% for your container is what you messed up. You cannot have 20% Fixed Sidebar. When you use % values, then it becomes fluid. I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
I have changed your code to make it better:
body {
max-width: 90%;
margin: 0 auto;
background-color: whitesmoke;
}
.sidenavbar {
width: 200px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
background-color: #fff;
color: #000;
}
.container {
padding-left: 200px;
}
.content {
margin: 0 auto;
padding: 15px;
}
<div class="sidenavbar">
<div class="brand">
<img id="logo" src="//placehold.it/150x75?text=Sidebar" width="150" alt="Sidebar" />
</div>
</div>
<div class="container">
<div class="content">
<img id="logo" src="//placehold.it/150x75?text=Main+Logo" width="150" alt="Logo" />
<h1>Generated Content</h1>
<p>This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. </p>
<h2>Hello!</h2>
<p>
This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus id vitae quidem eos aperiam quae facere iste illum doloremque, in temporibus earum nostrum saepe eius sed molestiae nam ad voluptatibus!</p>
<p>Tempora maiores eaque quis aperiam minus dignissimos quae, labore ab impedit quidem aliquid, voluptatum consequatur magnam ratione fugit accusamus cumque voluptates! Magni quo natus atque maxime debitis qui nam accusantium.</p>
<p>Corrupti temporibus iusto sequi, tenetur voluptatem, assumenda! Esse nesciunt, laborum! Quod ducimus quaerat praesentium in assumenda dignissimos harum, suscipit debitis at. Quasi laborum, ducimus earum quis dolor natus, obcaecati in.</p>
<p>Vel veniam deleniti quos ab in, rem possimus labore sed expedita animi dolores id totam pariatur delectus beatae, consequatur maiores distinctio porro officiis numquam velit, sequi quia ea quasi? Sapiente.</p>
<p>Quibusdam similique ipsa aut eligendi, rem amet assumenda officiis delectus mollitia dolorem cumque sit sint, consequatur unde cupiditate optio dolor ad, vitae ullam quo. Dolorum aperiam est explicabo aliquid totam?</p>
<p>Amet ratione laboriosam iste dolore expedita magni, reprehenderit sed est, tempora ex asperiores ad harum. Mollitia distinctio dolor nostrum omnis dignissimos voluptate debitis eveniet quasi, in molestiae enim accusantium quis.</p>
<p>Repellendus incidunt doloremque aspernatur ea, distinctio animi. Odit porro, ratione deserunt qui possimus esse! Quas nisi ipsa necessitatibus odit ipsum minima voluptate quam praesentium numquam natus. Accusamus adipisci quidem ad?</p>
<p>Placeat magnam, in amet tempora aperiam perspiciatis sit culpa eius ullam inventore nam animi eveniet aspernatur, cupiditate sint minima quos debitis quaerat quasi, quas, sed similique. Autem totam, tempora numquam.</p>
<p>Optio accusantium et, quas deleniti, itaque voluptatum repudiandae ipsam, sequi esse, veniam reprehenderit? Adipisci laborum libero culpa rem, eius eaque, unde temporibus, corrupti numquam ipsum est eum sed iusto quasi.</p>
<p>Cumque nihil illum numquam hic mollitia vel ullam iure est ad, praesentium aspernatur ipsum reprehenderit cum labore alias culpa, impedit. Tenetur quibusdam incidunt voluptate eius voluptates repellendus voluptas pariatur autem.</p>
<p>Quae ex natus inventore voluptatum minus porro ullam, assumenda laboriosam. Excepturi dignissimos et quos quam maiores provident error earum quisquam est, rem ex perferendis eos laborum saepe! Quam, pariatur, cupiditate!</p>
<p>Quidem officiis explicabo repellat deserunt vero sit eius, eos nulla laboriosam libero pariatur quisquam iste soluta dicta quasi incidunt enim quae voluptatibus maiores vitae, odio fuga amet. Veritatis, sed, officia.</p>
<p>Repudiandae ducimus debitis ab sed expedita, ad autem aperiam asperiores consequatur perferendis. Nihil ipsum sint officia placeat neque necessitatibus recusandae, error. Nesciunt amet ea nostrum reiciendis, velit fugit ex fuga!</p>
<p>Illo, tempora magnam rem minima nulla veritatis reiciendis ipsum commodi dicta ab incidunt, rerum voluptatem necessitatibus autem debitis dolores vel, ratione sed perferendis impedit ex! Nam corporis, assumenda possimus culpa.</p>
<p>Quam, quo, quis! Dolorum unde tempore eaque optio quos rem saepe distinctio eius maiores nesciunt obcaecati totam, repellat consectetur tenetur earum illo reprehenderit accusantium quisquam. Voluptas eaque perspiciatis in voluptatem?</p>
</div>
</div>
Please kindly run the above snippet and see in here as well as in full screen. The sidebar will be fixed and you have fluid scrollable main content.
Read more about this approach in my detailed article: Science behind Fixed-Fluid Layouts.