Tips for positioning two divs side by side with a fixed position and full height

Question

Tips for positioning two divs side by side with a fixed position and full height

I want to set up 2 divs, one as a sidebar on the left and the other for displaying content on the page. Here's what I'm aiming for:

Have the sidebar div height at 100%
Set the body height to 100% as well
Make sure the body's width adjusts when the sidebar width changes

This is the code snippet I have been experimenting with:

#Sidebar{
  background-color:#F0F0F0;
  height: calc(100% - 80px);
  width: 257px;
  position: fixed;
  left: 0;
  bottom: 0;
  overflow:hidden;
  white-space: nowrap;
}

#content {
  margin: 0;
  position: fixed;
  height: 100%;
}

However, the content in the div ends up showing inside the Sidebar instead!

#Sidebar {
    height: calc(100% - 80px);
    width: 257px;
    position:fixed;
    top:0;
    left: 0;
    bottom: 0;
    overflow:hidden;
    white-space:nowrap;
    border:1px solid #000;
}
#content {
    margin: 0;
    position:fixed;
    height: 100%;
    border:1px solid tomato;
}

<div id="Sidebar">
  Hello World!!
</div>
<div id="content">
  Content Div
</div>

Note that I am using jQuery .Resizable to adjust the width dynamically. You can also check out the working example on jsfiddle here.

html css

Answer 1

Answer №1

Is it possible to simply place the sidebar

.sidebar {
    position: fixed;
    height: 100vh;
    left: 0px;
    top: 0px;
    width: 275px;
}

and adjust the body container like this

body {
    padding-left: 275px;
}

This way, there won't be any overlap and you can design your body content freely. An interesting feature of this approach is that when using media queries for mobile responsiveness, you can remove the padding and move the sidebar outside the body, making it slide into view on a button click or other trigger.

Answer 2

Is it possible to simply place the sidebar

.sidebar {
    position: fixed;
    height: 100vh;
    left: 0px;
    top: 0px;
    width: 275px;
}

and adjust the body container like this

body {
    padding-left: 275px;
}

This way, there won't be any overlap and you can design your body content freely. An interesting feature of this approach is that when using media queries for mobile responsiveness, you can remove the padding and move the sidebar outside the body, making it slide into view on a button click or other trigger.

Answer 3

Answer №2

To ensure proper alignment, adjust the margin-left of your main content to match the width (plus any desired gap) and make adjustments as needed when resizing the sidebar.

#content {
    margin-left: 257px;

For an updated demonstration, view this fiddle: https://jsfiddle.net/j64r3bm1/2/

The issue arises when using position:fixed, causing elements to 'hover' on the page without taking up space. This results in the content div being placed at left:0 due to the absence of neighboring elements occupying space.

Applying position:fixed to both the sidebar and content can prevent them from occupying the full height of the page, as they would have 0 width and height. Alternatively, consider using float:left instead of fixed positioning.

Answer 4

To ensure proper alignment, adjust the margin-left of your main content to match the width (plus any desired gap) and make adjustments as needed when resizing the sidebar.

#content {
    margin-left: 257px;

For an updated demonstration, view this fiddle: https://jsfiddle.net/j64r3bm1/2/

The issue arises when using position:fixed, causing elements to 'hover' on the page without taking up space. This results in the content div being placed at left:0 due to the absence of neighboring elements occupying space.

Applying position:fixed to both the sidebar and content can prevent them from occupying the full height of the page, as they would have 0 width and height. Alternatively, consider using float:left instead of fixed positioning.

Answer 5

Answer №3

After some experimenting, I finally cracked the code on how to achieve it. Using JQuery was the key component in implementing this feature. Here's the snippet of code that did the trick:

#Sidebarlist
{
    background-color: var(--SidebarBackgroundColor);
    height: calc(100% - 80px);
    color:var(--SidebarTextColor);
    width: 257px;
    position: fixed;
    left: 0;
    bottom: 0;
    overflow:hidden;
    white-space: nowrap;
}
#MainContentdiv {
    height: 100%;
}

Furthermore, with the help of jQuery:

$('#Sidebarlist').resizable({
       start: function( event, ui ) {},
       stop: function( event, ui ) {},
       handles: 'n,w,s,e',
       minWidth: 200,
       maxWidth: 400
});
$( "#Sidebarlist" ).on( "resizestart", function( event, ui ) {
     var marginleft = $("#Sidebarlist").width();
     $('#MainContentdiv').css('margin-left',marginleft);
});
$( "#Sidebarlist" ).on( "resizestop", function( event, ui ) {
    var marginleft = $("#Sidebarlist").width();
    $('#MainContentdiv').css('margin-left',marginleft);
});

A shoutout to everyone who contributed their knowledge to assist me along the way.

Answer 6

After some experimenting, I finally cracked the code on how to achieve it. Using JQuery was the key component in implementing this feature. Here's the snippet of code that did the trick:

#Sidebarlist
{
    background-color: var(--SidebarBackgroundColor);
    height: calc(100% - 80px);
    color:var(--SidebarTextColor);
    width: 257px;
    position: fixed;
    left: 0;
    bottom: 0;
    overflow:hidden;
    white-space: nowrap;
}
#MainContentdiv {
    height: 100%;
}

Furthermore, with the help of jQuery:

$('#Sidebarlist').resizable({
       start: function( event, ui ) {},
       stop: function( event, ui ) {},
       handles: 'n,w,s,e',
       minWidth: 200,
       maxWidth: 400
});
$( "#Sidebarlist" ).on( "resizestart", function( event, ui ) {
     var marginleft = $("#Sidebarlist").width();
     $('#MainContentdiv').css('margin-left',marginleft);
});
$( "#Sidebarlist" ).on( "resizestop", function( event, ui ) {
    var marginleft = $("#Sidebarlist").width();
    $('#MainContentdiv').css('margin-left',marginleft);
});

A shoutout to everyone who contributed their knowledge to assist me along the way.

Answer 7

Answer №4

If you want to achieve a specific layout, try adding the following CSS properties:

left: 257px;
top: 0;

To make sure your content is responsive, you can use a container element like this:

#Container {
    height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
}

#Sidebar {
    height: calc(100% - 80px);
    width: 257px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    border:1px solid #000;
}
#content {
    margin: 0;
    height: 100%;
    border:1px solid tomato;
}

<div id="Container">
  <div id="Sidebar">
    Hello World!!
   </div>
  <div id="content">
    Content Div
  </div>
</div>

Answer 8

If you want to achieve a specific layout, try adding the following CSS properties:

left: 257px;
top: 0;

To make sure your content is responsive, you can use a container element like this:

#Container {
    height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
}

#Sidebar {
    height: calc(100% - 80px);
    width: 257px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    border:1px solid #000;
}
#content {
    margin: 0;
    height: 100%;
    border:1px solid tomato;
}

<div id="Container">
  <div id="Sidebar">
    Hello World!!
   </div>
  <div id="content">
    Content Div
  </div>
</div>

Answer 9

Answer №5

Here's an unconventional solution that I have tested in both Firefox and Chrome with success. However, due to its innovative nature, I cannot guarantee compatibility with Internet Explorer.

This solution leverages CSS variables, allowing for different calculations based on the variable specified at the beginning (in the :root section).

To enhance clarity, borders have been removed and background colors are used to distinguish between divs.

UPDATE:

I've incorporated a small amount of JavaScript to demonstrate how updating the variable dynamically triggers adjustments across the page.

changeSidebar = function() {
  var customSize = document.querySelector('.sidebar-width').value;
  document.documentElement.style.setProperty('--menu-width', customSize + 'px');
}

:root {
  --menu-width: 257px
}
#sidebar,
#sidebar-footer {
  width: var(--menu-width);
  left: 0;
  overflow: hidden;
  position: fixed
}
body {
  margin: 0
}
#sidebar {
  height: calc(100% - 80px);
  top: 0;
  white-space: nowrap;
  background: orange
}
#sidebar-footer {
  height: 80px;
  top: calc(100% - 80px);
  background: pink
}
#content {
  position: fixed;
  right: 0;
  width: calc(100% - var(--menu-width));
  height: 100%;
  background: tomato
}

<div id="sidebar">
  Hello World!!
</div>
<div id="sidebar-footer">
  I'm just here to fill that space...
</div>
<div id="content">
  Content Div
  <br />
  <input class="sidebar-width" value='257'>
  <button onclick="changeSidebar();">Enter</button>
</div>

Answer 10

Here's an unconventional solution that I have tested in both Firefox and Chrome with success. However, due to its innovative nature, I cannot guarantee compatibility with Internet Explorer.

This solution leverages CSS variables, allowing for different calculations based on the variable specified at the beginning (in the :root section).

To enhance clarity, borders have been removed and background colors are used to distinguish between divs.

UPDATE:

I've incorporated a small amount of JavaScript to demonstrate how updating the variable dynamically triggers adjustments across the page.

changeSidebar = function() {
  var customSize = document.querySelector('.sidebar-width').value;
  document.documentElement.style.setProperty('--menu-width', customSize + 'px');
}

:root {
  --menu-width: 257px
}
#sidebar,
#sidebar-footer {
  width: var(--menu-width);
  left: 0;
  overflow: hidden;
  position: fixed
}
body {
  margin: 0
}
#sidebar {
  height: calc(100% - 80px);
  top: 0;
  white-space: nowrap;
  background: orange
}
#sidebar-footer {
  height: 80px;
  top: calc(100% - 80px);
  background: pink
}
#content {
  position: fixed;
  right: 0;
  width: calc(100% - var(--menu-width));
  height: 100%;
  background: tomato
}

<div id="sidebar">
  Hello World!!
</div>
<div id="sidebar-footer">
  I'm just here to fill that space...
</div>
<div id="content">
  Content Div
  <br />
  <input class="sidebar-width" value='257'>
  <button onclick="changeSidebar();">Enter</button>
</div>

Answer 11

Answer №6

Here is the resolution:

let sidebarHeight = document.getElementById('Sidebar').offsetHeight;
document.getElementById('content').style.height = sidebarHeight+'px';

#Sidebar{
background-color:#F0F0F0;
height: 700px;
width: 10%;
float:left;
left: 0;
bottom: 0;
overflow: hidden;

}
#content {
margin: 0;
width:90%;
float:right;
background-color:green;
}

<div id="Sidebar">
Side bar
</div>
<div id="content">
Hello Universe!
</div>

Answer 12

Here is the resolution:

let sidebarHeight = document.getElementById('Sidebar').offsetHeight;
document.getElementById('content').style.height = sidebarHeight+'px';

#Sidebar{
background-color:#F0F0F0;
height: 700px;
width: 10%;
float:left;
left: 0;
bottom: 0;
overflow: hidden;

}
#content {
margin: 0;
width:90%;
float:right;
background-color:green;
}

<div id="Sidebar">
Side bar
</div>
<div id="content">
Hello Universe!
</div>

Tips for positioning two divs side by side with a fixed position and full height

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

display or conceal a div when a radio button is selected

A guide on updating the appearance of a list of comma-separated tags using HTML, CSS, and jQuery

Minimize ring size through mesmerizing smoke effects

What is the functionality of the CSS switch button?

Tips for keeping the footer consistently at the bottom of the page without using a fixed position (to avoid overlapping with the main content)

Looking for a different method to remove a list item within an unordered list using CSS instead of HTML

Discovering all input elements by utilizing nextAll in jQuery

Is there a way for me to design a button that includes an image?

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

Expanding the width of the containing div using CSS

problem of underlining links in bootstrap

Unveiling the Invisible: A Guide to Revealing Conce

Interactive game created using JavaScript input

Enhance the progression bar using JavaScript

The React Navbar dropdown items appear to be displaying only text, without any menu showing up behind

Having trouble using Jquery Selector to locate a div element in my Polymer project. Seems like it should be simple, but I can

How to create a four-box grid with a specific right margin for every 4th child using CSS

Delayed suggestions using Typeahead and Bloodhound technology

Conceal a <div> element that includes a link using CSS within the @

On a medium-sized screen, a collapsible button unexpectedly appears amidst the various links