Fixed Sidebar and Dynamic main content with top and bottom sections

Question

Fixed Sidebar and Dynamic main content with top and bottom sections

Hello, I've been encountering an issue with coding the layout of my website. I want the sidebar to remain fixed regardless of screen size, while also making sure that the content area adjusts fluidly. The header is staying at the top as desired, but I'm facing difficulty with the footer. I need it to always stay at the bottom and span the full width of the content area. Any help would be greatly appreciated.

Below is the code snippet:

html, body { 
    height: 100%; 
    margin: 0;
}   

#content { 
    width: 100%; 
    height: 100%;
}   

#left { 
    width: 20%; 
    height: 100%; 
    float: left; 
    background-color: red; 
}   

#right { 
    float: left; 
    width: 80%; 
    height: 100%;  
    background-color: green;
} 

#right header { 
    background: blue;
    text-align: center;
    color: white;
    padding: 20px;
}

#right footer {
    background: brown;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    width: 80%;
}

<div id='content'>   
    <div id='left'>Testing</div>   
    <div id='right'>
        <header>TITLE</header>
        <div class="content">
            <p>lorem ipsum and the like.</p>
        </div>
        <footer>FOOTER</footer>
    </div>
</div>

html css

Answer 1

Answer №1

It is recommended to use inline-block instead of float:left in order to avoid issues with clearings. However, when utilizing inline-block, it is advisable to utilize vh over % to fill the viewport effectively.

To create a fixed sidebar, simply assign it a fixed width and utilize calc to determine the remaining space.

A sample implementation could look like this:

Snippet

html,
body {
  height: 100vh;
  margin: 0;
}
#content {
  width: 100vw;
  font-size: 0; /* addressing inline-block gap */ 
}
#content > div {
  font-size: 16px; /* restoring font-size value */
}
#left {
  width: 150px;
  height: 100vh;
  display: inline-block;
  vertical-align: top;
  background-color: red;
}
#right {
  display: inline-block;
  width: calc(100vw - 150px);
  height: 100vh;
  background: green
}
#right header {
  background: blue;
  text-align: center;
  color: white;
  padding: 20px;
}
#right footer {
  background: brown;
  text-align: center;
  color: white;
  position: absolute;
  bottom: 0;
  width: calc(100vw - 150px);
}

<div id='content'>
  <div id='left'>Testing</div>
  <div id='right'>
    <header>TITLE</header>
    <div class="content">
      <p>lorem ipsum and the like.</p>
    </div>
    <footer>FOOTER</footer>
  </div>
</div>

Answer 2

It is recommended to use inline-block instead of float:left in order to avoid issues with clearings. However, when utilizing inline-block, it is advisable to utilize vh over % to fill the viewport effectively.

To create a fixed sidebar, simply assign it a fixed width and utilize calc to determine the remaining space.

A sample implementation could look like this:

Snippet

html,
body {
  height: 100vh;
  margin: 0;
}
#content {
  width: 100vw;
  font-size: 0; /* addressing inline-block gap */ 
}
#content > div {
  font-size: 16px; /* restoring font-size value */
}
#left {
  width: 150px;
  height: 100vh;
  display: inline-block;
  vertical-align: top;
  background-color: red;
}
#right {
  display: inline-block;
  width: calc(100vw - 150px);
  height: 100vh;
  background: green
}
#right header {
  background: blue;
  text-align: center;
  color: white;
  padding: 20px;
}
#right footer {
  background: brown;
  text-align: center;
  color: white;
  position: absolute;
  bottom: 0;
  width: calc(100vw - 150px);
}

<div id='content'>
  <div id='left'>Testing</div>
  <div id='right'>
    <header>TITLE</header>
    <div class="content">
      <p>lorem ipsum and the like.</p>
    </div>
    <footer>FOOTER</footer>
  </div>
</div>

Answer 3

Answer №2

Follow these steps for optimal results:

To start, switch out float:left; with display: table-cell; in your #left and #right selectors.
Next, apply display: table; to your #content selector.
Remove the width: 80%; from both your #right and #right footer selectors.
Include right : 0; in your #right footer selector.
Lastly, ensure the left of your footer and the width of your sidebar match a fixed width for consistency.

This method is advantageous as it functions seamlessly on IE8 and browsers lacking support for calc().

Take a look at this demonstration :

html, body { 
    height: 100%; 
    margin: 0;
}   

#content { 
    width: 100%; 
    height: 100%;
    display: table;
}   

#left { 
    width: 100px;
    height: 100%; 
    display: table-cell;
    background-color: red; 
}   

#right { 
    display: table-cell;
    height: 100%;  
    background-color: green;
} 

#right header { 
    background: blue;
    text-align: center;
    color: white;
    padding: 20px;
}

#right footer {
    background: brown;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    right : 0;
    left : 100px;
}

<div id='content'>   
    <div id='left'>Testing</div>   
    <div id='right'>
        <header>TITLE</header>
        <div class="content">
            <p>lorem ipsum and the like.</p>
        </div>
        <footer>FOOTER</footer>
    </div>
</div>

Check out this Fiddle for more insight.

Answer 4

Follow these steps for optimal results:

To start, switch out float:left; with display: table-cell; in your #left and #right selectors.
Next, apply display: table; to your #content selector.
Remove the width: 80%; from both your #right and #right footer selectors.
Include right : 0; in your #right footer selector.
Lastly, ensure the left of your footer and the width of your sidebar match a fixed width for consistency.

This method is advantageous as it functions seamlessly on IE8 and browsers lacking support for calc().

Take a look at this demonstration :

html, body { 
    height: 100%; 
    margin: 0;
}   

#content { 
    width: 100%; 
    height: 100%;
    display: table;
}   

#left { 
    width: 100px;
    height: 100%; 
    display: table-cell;
    background-color: red; 
}   

#right { 
    display: table-cell;
    height: 100%;  
    background-color: green;
} 

#right header { 
    background: blue;
    text-align: center;
    color: white;
    padding: 20px;
}

#right footer {
    background: brown;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    right : 0;
    left : 100px;
}

<div id='content'>   
    <div id='left'>Testing</div>   
    <div id='right'>
        <header>TITLE</header>
        <div class="content">
            <p>lorem ipsum and the like.</p>
        </div>
        <footer>FOOTER</footer>
    </div>
</div>

Check out this Fiddle for more insight.

Fixed Sidebar and Dynamic main content with top and bottom sections

Answer №1

Snippet

Answer №2

Take a look at this demonstration :

Similar questions

Switch between showing or hiding at least three divs

Tips for achieving an eye-catching text and image layout on a single page of your Wordpress blog

Issue with Ajax request failing to successfully send and retrieve raw HTML data

Elements are failing to respond to the padding and margin adjustments in my CSS styling

Clicking a link will trigger a page refresh and the loading of a new div

Neglect to notify about the input text's value

Is it possible to customize the default styling options in Tailwind?

Having trouble getting the CSS URL to work when using a leading slash?

Step-by-step guide to implementing a sticky header while scrolling

Enhancing HTML Documents with the Header Element

Stop webpage loading with -webkit-transform

In instances where the text exceeds the width of the container, a horizontal scrollbar will appear

Can you identify the origin of the inclusion of a .php file?

Is it possible for a table row's cell to determine the value of the cell in the row above it?

FlexBox responsive items that are expandable getting cut off

Pause the event listener temporarily and reattach it after specific actions have been completed

What could be causing my modal to not animate from the center of the screen?

Ways to activate auto completion without using a string

Utilizing CSS to Implement a Background Image

Creating a Google Captcha with validation is a straightforward process that can enhance the