Static HTML side navigation bar

Is there a way to troubleshoot my rigid right navigation bar? My apologies if this is too broad of an inquiry. In essence, I'm aiming for a website design with two columns featuring a header and footer. The styling for the header, footer, and overall layout are all complete, but I'm encountering challenges in keeping the sidebar fixed. Here's a snippet of my CSS:

body {
  background-color: black;
  color: #00FE52;
  font-size: 14px;
}
#header {
  position: fixed;
  background-color: black;
  color: #00FE52;
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida        Typewriter', monospace;
  font-size: 28px;
  height: 80px;
  width: 100%;
}
#content {
  padding-top: 80px;
  float: left;
  width: 80%;
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida  Typewriter', monospace;
}
#navbar {
  position: fixed;
  padding-top: 80px;
  padding: 80%;
  float: left;
  height: (100% - 80px);
  width: 20%;
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}
#footer {
  position: fixed;
  background-color: black;
  text-align: center;
  color: #00FE52;
  font-size: 14px;
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida   Typewriter', monospace;
  left: 0px;
  bottom: 0px;
  height: 30px;
  width: 100%;
}
<!-- Header -->
<div id="header" data-position="fixed">
  <p>Traxitor Development</p>
</div>

<!-- Content -->
<div id="content">
  <p>This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This
    should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should
    show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show
    up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up
    in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in
    on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on
    the left side.</p>;



</div>

<!-- Navigation Bar -->
<div id="navbar">
  <p>This should show up on the right side</p>



</div>

<!-- Footer -->
<div id="footer" data-position="fixed">
  <p>Traxitor Development - Copyright © 2016 - Theme created by <a href="https://twitter.com/9fiftyfive" style="color:#00FE52;text-decoration:none;">@9fiftyfive</a>
  </p>
</div>

htmlcssnavigationsidebar

Answer №1

Experiment with this code:

#navbar {
    position: absolute;
    top: 80px;
    left: 80%;
    text-align: left;
    color: #FFFFFF;
    font-size: 20px;
    height: calc(100% - 80px);
    width: 20%;
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

View JSFIDDLE Demo

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

Implement a click event to trigger a search functionality within Bootstrap

I have implemented the following code to add search options in the navigation bar. It is displaying correctly, but I am not getting the click action that I require. For example, I want to trigger an action from JavaScript when the user clicks on the enter ...

javascripthtmlangularjstwitter-bootstrap

Is there a way to render an image onto a canvas using an input tag?

Looking to create an image preview using canvas? Upload the image with the input tag and watch it display on canvas. I've experimented with various methods such as using img tags, setting img src for canvas using img tags, and trying onclick function ...

javascripthtmlhtml5-canvas

Ensure that the div automatically scrolls to the bottom when it is loaded, and also when new data is added - using angular

My goal is to replicate the functionality of the iPhone's "Messages" app on a web application using AngularJS or any other JavaScript framework. Each message will be contained in a div element within a larger container. When a new message is added, I ...

javascriptjqueryhtmlangularjs

Issues with Image and Product Name Rendering in Outlook for Windows

Having a bit of trouble with Outlook PC not cooperating with my product images and names. While other email clients show the product names below the images as intended, Outlook PC is causing the names to appear next to the images like this - Product name ...

htmlcssemailoutlookhtml-email

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

javascriptjqueryhtml

Learn how to troubleshoot and resolve a bug in the mobile Chrome browser that pertains to the position fixed feature

On the mobile version of Firefox, everything works perfectly. However, there seems to be a bug in Chrome with the fixed positioning. When scrolling, the header should change from absolute to fixed and the height should go from 65 to 35 pixels. Unfortunatel ...

jqueryhtmlcssmobile-chrome

Screen proportions altered - Background image disappearing | Unusual occurrences |

If you look at my site everything seems to be ok, ... untill you minimize the website. A horizontal scrollbar appears and when you use that scrollbar, you will see that my image has vanished. My Website I made that image responsive...so i have no idea wh ...

htmlcss

Transition Effect for Sub Menu Hover in Google Chrome

The top menu bar on my website has a second level dropdown that is functioning correctly in Firefox but not in Chrome. In Chrome, when I mouse out of the dropdown, the background color disappears before the links. This creates a slight timing gap between ...

htmlcssgoogle-chrome

Styling the file input type in AngularLearn how to customize the

I've come across numerous queries on how to style an input type file, but I'm struggling to implement it in an angular context. So, what is the best way to customize the appearance of an input type file within an angular application? Below is t ...

javascriptjqueryhtmlangularjs

Ways to assign the value of an alert to an element

Within this piece of code, my intention is to retrieve the alert value and apply it to an element. Description: The AJAX code I have written checks for values in a database, fetches new values from the database, and then displays these fetched values in a ...

javascriptjqueryhtmlajax

Python code to generate a URL that opens in a new tab:

Currently, I am working on constructing a URL using Python 2.7 and have the following code snippet: link.append("<a href='" + tableLink + sysID[i] + " target='_blank'>" + ticketNumber[i] + "</a>") However, when the link is disp ...

pythonhtml

What is the reason for hasChildNodes returning true when dealing with an Empty Node?

When the user clicks on purchase and the cart is empty, there should be an alert. However, it seems that no response is triggered. Upon running the program, an error message appears stating that it cannot read the property of addEventListener which is unde ...

javascripthtml

Using Angular 6 to load external HTML files with CSS inside a router-outlet

I'm currently working on creating a json-based dynamic template using Angular 6. There are certain scenarios where I need to fetch external html content (which could be stored in a database) along with its corresponding css (also stored separately in ...

javascripthtmlcssangular

JavaScript code that deletes text from a document - Script eradication

I am trying to display the message "Todays Beer Style is: "Beer Style". However, when I add the javascript code, the "Todays Beer Style is:" text disappears. I'm not sure why this is happening. Below is the HTML code for reference. HTML Code <!DO ...

javascripthtml

Issue with the height of content in Mobile Safari when using Bootstrap 4 columns

I have incorporated Bootstrap 4 into my website's design, specifically utilizing the bootstrap grid layout in flex mode. Within one of the columns, I have placed a button that I desire to fill the entire column width. I have achieved this by setting ...

csssafarimobile-safaribootstrap-4

Pedestrian crossing Cordova experiences delayed response despite ontouchstart attempts to fix it

I have been experiencing a delay issue when using a CSS button with the ":active" pseudo-class on my phone. Every time I click the buttons, there is a noticeable delay before entering the active phase. Here is my CSS code: .btn {...} .btn:active{...} To ...

androidjquerycsscordovacrosswalk-runtime

Using the flex:1 property does not automatically make my elements the same size and cover the entire height of the container

I have 2 containers and I want the elements in each container to fill the entire container. My goal is to make one container appear larger than the other. https://i.stack.imgur.com/73yoR.jpg Even though I am using the flex: 1 property, it does not seem t ...

css

Having trouble adding two controller.js files to the same HTML page. The error message "Argument {mycontroller} is not a function, got undefined" keeps popping up

I recently started learning Angular and I'm facing a challenge with nested Angular controllers. I have stored all the controllers in separate .js files. The main controller on my webpage needs to include another controller called 'UploadControll ...

htmlangularjs

What is the best way to consistently update my database with an accurate time stamp every 5 seconds?

My database has a table named user which includes a field called last_seen. I am looking to regularly update this field with the current timestamp every 5 seconds. ...

phpjqueryajaxhtml

bootstrap3 container alignment

I encountered a challenge while attempting to right-align multiple Bootstrap 3 containers in a straightforward manner. Despite my efforts, achieving this proved to be more complex than expected. In essence, I faced an issue where aligning the text box with ...

csstwitter-bootstrap-3