The sidebar appears to be hovering above the footer section

I am currently working on creating a sidebar that sometimes ends up being longer than the main content section. You can check out my demo here: http://jsfiddle.net/y9hp4evy/1/ and another case here: http://jsfiddle.net/y9hp4evy/2/ (If I add a height to the sidebar).

The issue I am facing is that when the sidebar content extends beyond its designated area, it overlaps with the footer and some content gets cut off below the end of the sidebar section.

.container {
    width: 800px;
}

.right-pane {
    float: right;
    width: 300px;
}

.left-pane {
    margin-right: 320px;
    position: relative;
    min-width: 300px;
}
footer{
    background-color: #cdc;
}

I have tried searching for a solution but haven't found any relevant answers yet. Any help or guidance on what might be missing in my code would be immensely appreciated.

htmlcss

Answer №1

In situations like these, ensure that your sidebar is enclosed within the main content wrapper. For example:

<div id="container">
  <div id="article"></div>
  <div id="sidebar"></div>
</div>

<footer></footer>

Next, make sure to add a clearfix to the main 'container' in your CSS. For instance:

#container:after{
  content: "",
  display: block;
  clear: both;
}

Check out the updated version of your JSfiddle here: http://jsfiddle.net/y9hp4evy/3/ Keep in mind that I removed the height attribute for the sidebar. It's best not to impose a specific height unless you're prepared to address overflow scenarios. Using min-height is a safer alternative.

Answer №2

Check out the updated code snippets:

.right-pane {
    float: right;
    width: 300px;
}
.left-pane {
    float:left;
    position: relative;
    width: 300px;
}

View Example 1 Here

Here is the second one:

(Height of sidebar has been removed)

View Example 2 Here

Update:

Check Out the Updated Version Here

Remember to use col-sm-4 and include a fixed-width sidebar inside it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Content on the website has vanished into thin air

Attempting to retrieve the content of a webpage located at The source code of this page reveals an element labeled "row_1"... However, when attempting to achieve this in my code: reader = new BufferedReader(new InputStreamReader(connection.getInputStrea ...

androidhtml

Creating a dynamic background using a blend of two hues in CSS

Is there a way to stack two colors on top of each other using just one div element, or even better, achieve the same effect with just one color that is a blend of the two? I currently have two divs superimposed, with the top one at 60% opacity. I've ...

htmlcssbackground-image

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

I'm working with an HTML template that contains a DIV with a button and a script with a function to call when the button is clicked: <div id="CLC_Form"> various text and checkbox inputs go here... <br> <input type="button" ...

javascriptjqueryhtml

Ensure that column headers remain fixed when scrolling side to side

I'm trying to adjust the column headers so that I can scroll horizontally while keeping the headers visible. I've attempted the following changes but haven't been successful. In the screenshots provided, you can see that when I scroll up or ...

htmlcssangular

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

javascripthtmlcssangularjsangular-ui-router

Personalize Autocomplete CSS based on the TextField input in React Material UI when a value is present

In my current project, I am utilizing React Material Autocomplete fields, which includes a nested TextField. I have successfully implemented standard styles for when the field is empty and only the label is visible, as well as different styles for hover ef ...

cssreactjsmaterial-ui

particular shade for button border and background

I'm looking to create a button using Material UI that has a specific design. Right now, I've only been able to achieve this: https://i.stack.imgur.com/xvv7s.png Here is the code I am currently using. If anyone can help me identify what I'm ...

cssmaterial-ui

PHPMailer issue with rendering HTML in email body

Our email system utilizes PHPMailer to format emails, but when the emails are sent and opened in email clients like Gmail and Yahoo, they display as text instead of HTML. We have tested different email clients, such as Outlook, which allows us to attach a ...

phphtmlgmailphpmailerhtml-email

Guide on attaching an event to every dynamically created element in JavaScript

I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...

javascripthtmlcss

Storing various duplicates of items in local storage

Looking for help with storage settings in HTML/JavaScript as I work on a mobile not taking app using Phonegap. My goal is to allow users to input a note name and content, save them into a jquery mobile list, and see them on the home screen. However, I&apos ...

javascripthtmlcordovajquery-mobilelocal-storage

Transmitting video through a local area network

I am seeking a solution to stream video content to a local network with potentially over 1000 viewers. The streaming will need to be accessible via web browsers such as Internet Explorer, Chrome, and Firefox, as not all users have internet access due to co ...

javascripthtmlvideostreamingjwplayer

Using AngularJS filter to refine results based on specific values within JSON data

I am looking to implement a custom free text filter with just one input field in a table. The standard filter currently applies to all values, but I specifically need it to focus on col1 and col2 from this JSON array: myJsonArray = [{col1: "xxx", col2: "y ...

htmlangularjsfilter

What could be the reason for the malfunctioning dropdown menu in my navigation bar upon clicking it?

After spending hours practicing creating a navbar using Bootstrap 3.3.7, I've hit a roadblock - the dropdown is not working when clicked on. It's frustrating because I have double-checked all my scripts and ensured that I have the latest version ...

javascriptjqueryhtmlcsstwitter-bootstrap

Internet Explorer is having issues displaying CSS text accurately, particularly in relation to the background-

Having an issue with Internet Explorer not displaying my background clipped text correctly. In other browsers like Chrome and Firefox, the code renders fine: https://i.stack.imgur.com/x9lio.png However, in IE it appears differently: Your code: HTML: & ...

htmlcssinternet-explorertext

What is the best way to generate a search link after a user has chosen their search criteria on a webpage?

In my search.html file, I have set up a form where users can input their search criteria and click the search button to find information within a database of 1000 records. The HTML part is complete, but I am unsure how to create the action link for the for ...

javascripthtmlnode.jsexpress

Invoking partial view via Ajax

I am using Ajax to call a partial view, but it is returning as undefined. This is my controller code: [HttpGet] public ActionResult CallPartial() { if (Request.IsAjaxRequest()) { return PartialView("~/Views/Partial1"); ...

jqueryhtmlajaxmodel-view-controllerpartial-views

Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications? I attempted to add a class called .not_complete to one of the timeline containers, but it ...

htmlcss

Submit a list of checkboxes selected to Google Sheets separated by commas

Is there a way to modify the script I'm using to enter data from an HTML form into a Google Sheet so that my checkbox fields will be entered as a list, separated by commas? If all boxes were checked in the example form below, I would like the cell fo ...

javascripthtmlformsgoogle-apps-scriptcheckbox

Organizing content into individual Div containers with the help of AngularJS

As someone who is new to the world of AngularJS, I am currently in the process of learning the basics. My goal is to organize a JSON file into 4 or 5 separate parent divs based on a value within the JSON data, and then populate these divs with the correspo ...

javascriptjqueryhtmlangularjs

Controlling the page scroll when adding data using jQuery

I am encountering an issue with a webpage that displays around 20 pictures in separate divs stacked vertically. Below these 20 pictures, there is a "show more" button that, when clicked, loads another set of 20 pictures and appends them to the existing dat ...

htmljqueryscroll