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

Question

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?

html css

Answer 1

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

    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 3

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>

Answer 4

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>

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

Answer №1

Answer №2

Similar questions

What is the best way to ensure the dropdown box in a Bootstrap navbar automatically adjusts its width to fit within the

The element is unclickable due to being obstructed by another element

Is it possible to set the input form to be read-only?

transforming a text input into unadorned plain text

Experience the dynamic expansion of a droppable div as you elegantly drop an element within

An empty space separating the header and the navigation bar

What is the process for transmitting data in JSON format generated by Python to JavaScript?

Discover the Magic of CSS Animation

Different dimensions of the <select> element with the help of Ryan Fait's jQuery design script

What might be causing Flex not to function properly on my personalized landing page?

Is it possible to write CSS 3 rows without using the :not() selector for improved efficiency?

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

The issue with data targeting in Bootstrap 3 persists

Center the first column in jQuery Datatables

Steps to assign a value to an input element using the state in a React application

Resizing images in HTML can sometimes lead to extra white space appearing underneath the

Maximizing page space with ReactJS and advanced CSS techniques

JavaScript - Attempting to insert a value into a text field by clicking a button

PHP for creating dynamic website search capabilities

Employ a CSS3 media query within a Sass @for loop