Navigation bar in HTML positioned on the right side of the webpage

My goal is to have a navigation bar on the right side of the page, taking up 250px, while allowing the main content to naturally adjust its size based on the window dimensions. I do want the main content to appear before the navigation in the HTML structure, maintaining a left-to-right flow.

I successfully created a left-side navigation with the following code:

#left {
    float:left;
    width:250px;    
    background: blue;
}

#right {
    margin-left: 250px;
    background: orange;
}

Check out my code here on JSFiddle!

Now, I'm wondering how I can achieve a right-side navigation without changing the order of elements in the HTML. Any suggestions?

htmlcss

Answer №1

    html,
    body,
    div {
      height: 100%;
    }
    #right {
      float: right;
      width: 250px;
      background: blue;
    }
    #left {
      background: orange;
      float: left;
    }
<div id="right">
  hello
</div>
<div id="left">
  Content on the left side of the page.
</div>

Answer №2

To make a simple adjustment in your CSS code, just replace left with right:

html,
body,
div {
  height: 100%;
}
#left {
  float: right;
  width: 250px;
  background: blue;
}
#right {
  margin-right: 250px;
  background: orange;
}
<div id="left">
</div>
<div id="right">
</div>

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

Combining Images and Navigation in Next.js using Tailwind CSS

I am facing an issue where the image from a particular section overlaps with the Navbar dropdown on mobile devices. Adding z-50 to the navbar did not solve the problem as expected. What I want is for the image to remain below the dropdown menu when it is ...

javascriptcssnext.jstailwind-css

Issue with CanvasJS Carousel compatibility on Bootstrap 4 platform

I am struggling to display charts with a carousel feature using CanvasJS. Despite my efforts, I am unable to see any graphs on the page. My framework is Bootstrap 4.1.3. In my attempts to achieve this functionality, I previously experimented with Google C ...

jqueryhtmlchartsbootstrap-4canvasjs

Implementing PHP code in HTML file

Is there a way to utilize PHP in order to make changes to an HTML file on a website? To clarify, I am looking to create a PHP file with input boxes that can append to a list in an HTML file. For example, the admin.php file will update the index.html file ...

phphtml

Tracking changes in real time and calculating the sum with AJAX, PHP, and MySQL for efficient processing

Initially, I kindly request you to read this until the end. I am in dire need of assistance with my problem as I have searched for solutions but still remain clueless. Referring to the image provided, the first 'Product & Total Product' element ...

javascriptphphtmljqueryajax

Choosing only those elements that are not children of parents with a specific class by utilizing the `.not()` method

I am attempting to target all elements having the class .select that are nested somewhere within the DOM tree. The only condition is that these elements should not have any ancestors with the class .forbidden. This means it will not detect any elements ...

javascriptjqueryhtmldomdom-traversal

Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

After receiving assistance from members oka and Mike Robinson, I have successfully created two tables for users to interact with using tabs and dropdowns. Both tables have the same structure and feature a dropdown menu to show/hide columns. Users can sele ...

javascriptjquerycssdrop-down-menu

Flex and Bootstrap 5.1.3 divs are not aligned with the prices

I have implemented flex from here Whenever the content text increases in size, the div and the price do not remain aligned. See image here. My goal is to achieve the following: Make sure the div maintains the same size whether the content text is long ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5

Is there a way to keep the text animation going even when I'm not hovering over it with the cursor?

Is there a way to make text continue animating on the page even when the cursor is not placed on it? I understand the hover function, but how can I ensure the text keeps animating without interruption? $(document).ready(function () { $("#start&q ...

javascripthtmljquerycss

The text alongside the radio button is not aligned vertically

Hello, I am attempting to vertically align text next to my radio button but encountering some issues. .radio { cursor: pointer; display: inline-flex; } .cui-a-radio-button__input { display: none; } .cui-a-radio-button__input:disabled + .cui-a-rad ...

htmlcss

Sticky sidebar navigation paired with a scrollable main content area and anchor links

Examining the fiddle reveals a straightforward page layout with a fixed menu on the left and scrollable content. I am looking to align the menu with the content without any blank space at the top that causes the menu to shift upwards while scrolling down. ...

jqueryhtmlcss

Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

I'm attempting to create a button with a notification feature that mimics the style of Facebook notifications. I want a small red circle in the top right corner, showing a numerical value. However, I'm running into some difficulties. I can' ...

htmlcss

iOS emphasizes special characters by printing them in bold

Some parts of the website I am managing are showing German umlauts in bold (as seen in the screenshot). The font style being used is font-family: Source Sans Pro, Arial, sans-serif; with font-weight: 300. This font is sourced from Google Fonts. When I cha ...

ioscssfonts

Add new information after modifying it

Is there a way to retrieve the updated values from the table product and insert them into the purchases table? My code successfully updates the data, but encounters issues when trying to insert into the purchases table. <?php $ID=$_GET["stocksid"]; ...

phphtmlmysql

Error in compiling: Incompatibility between oncommand and CommandArgument attributes within LinkButton

I'm facing an issue with a LinkButton in a repeater on my aspx page. I am trying to call a function oncommand and pass a parameter via CommandArgument, but it keeps giving me a compilation error. Can someone help me figure out what I am missing here a ...

htmlasp.netlinkbuttonasprepeaterasplinkbutton

Managing the initial record in mysql

As I work on a slideshow, my goal is to dynamically change the HTML class attribute from "item" to "item active" when the first record is fetched from the database. For all subsequent records, the class should revert back to just "item." $RelatedTo=1; $ ...

phphtmlmysqlsqldatabase

Arrange the labels and input fields within nested elements in a synchronized manner

My data is structured semantically as shown below: <div class="inputs"> <div class="top"> <h4>Top</h4> <label for="top-1">Label 1</label> <input id="top- ...

csslayout

Rotation of the SVG coordinate system distorts angles

My comprehension of SVG, particularly the viewport, viewBox, and the user coordinate system, seemed fairly solid. In the initial example provided below, we utilized a viewBox with a matching aspect ratio as the viewport. As expected, there was no distorti ...

htmlcsssvg

Ways to verify the user's authentication status on the server end

Before displaying an HTML page, I need to verify user authentication. Here is a snippet from my server.js: const express = require('express'); var jquery = require('jquery'); var admin = require("firebase"); const app = expre ...

javascripthtmlexpressfirebase-authentication

Live Server in VS Code not refreshing automatically as expected

My problem is with VS Code and Live Server for HTML CSS. I expected the page to automatically reload after editing my HTML, but that's not happening. Even though I have Auto-Save enabled, Live Server isn't updating or refreshing my page automati ...

htmlcssvscode-extensionsliveserver