Positioning a div on the right side of its parent div

Hi there! I'm currently working on a small navbar that has two sections: the left section with an arrow icon and the right section with two icons - an envelope and an exclamation triangle. I've been trying to position the right section in the top right corner of the navbar (which is a div), but haven't had much success so far. Here is the code I have been using:

.arrow {
    color: gray;
    font: bold 11px "Helvetica";
    padding: 2px;
    text-decoration: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.arrow:after {
    background: gray;
    color: #FFF;
    content: ">";
    display: inline-block;
    font: bold 11px "Georgia";
    height: 25px;
    line-height: 25px;
    margin-left: 2px;
    text-align: center;
    width: 25px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.upper_menu{
    position:relative;
    display:block;
    background-color: #F2F6F7;
    width: 100%;
    height: 20%;
}

#upper_right_menu{
    position: absolute;
    float:right;
    margin:0px;
    padding:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
        <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Eliminate the absolute positioning style attribute from the id #upper_right_menu

.arrow {
    color: gray;
    font: bold 11px "Helvetica";
    padding: 2px;
    text-decoration: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    }

    .arrow:after {
    background: gray;
    color: #FFF;
    content: ">";
    display: inline-block;
    font: bold 11px "Georgia";
    height: 25px;
    line-height: 25px;
    margin-left: 2px;
    text-align: center;
    width: 25px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    }

    .upper_menu{
        position:relative;
        display:block;
        background-color: #F2F6F7;
        width: 100%;
        height: 20%;
    }

    #upper_right_menu{
        float:right;
        margin:0px;
        padding:0px;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
        <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>

Answer №2

To implement a flexible layout for your navbar, you can utilize CSS flexible boxes and simply remove the position:relative; property from your .upper_menu class.

Check out this interactive demo:

.arrow {
  color: gray;
  font: bold 11px "Helvetica";
  padding: 2px;
  text-decoration: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
nav{
}
.arrow:after {
  background: gray;
  color: #FFF;
  content: ">";
  display: inline-block;
  font: bold 11px "Georgia";
  height: 25px;
  line-height: 25px;
  margin-left: 2px;
  text-align: center;
  width: 25px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.upper_menu {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #F2F6F7;
  width: 100%;
  height: 20%;
}

#upper_right_menu {
  margin: 0px;
  padding: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="upper_menu">
    <div id="upper_left_menu">
      <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
      <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
      <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>

Answer №3

All you have to do is make a simple adjustment:

#upper_right_menu{
    position: absolute;
    float:right;
    margin:0px;
    padding:0px;
}

Change it to:

#upper_right_menu{
    position: absolute;
    right: 0;
    top: 0;
}

Answer №4

Consider using the display:table; method for your solution 

.arrow {
    color: gray;
    font: bold 11px "Helvetica";
    padding: 2px;
    text-decoration: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    }

    .arrow:after {
    background: gray;
    color: #FFF;
    content: ">";
    display: inline-block;
    font: bold 11px "Georgia";
    height: 25px;
    line-height: 25px;
    margin-left: 2px;
    text-align: center;
    width: 25px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    }

    .upper_menu{
        position:relative;
        display:table;
        background-color: #F2F6F7;
        width: 100%;
        height: 20%;
    }

    #upper_right_menu{
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
        <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>

Answer №5

Here is the answer that I have come up with

#upper_right_menu{
    position: fixed;
    top: 0;
    right: 0;
}

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

What is the best way to use checkboxes to highlight table rows in Jquery Mobile?

I have a Jquery Mobile site with a table. Each table row contains checkboxes in the first cell. I am trying to achieve the following: a) Highlight a row when the user clicks on it b) Highlight a row when the user checks the checkbox I have made progr ...

javascriptjqueryeventsjquery-mobilecheckbox

Utilize Jquery to trigger Controller Action

My goal is to refresh a specific 'div' when a user adds an item to the shopping cart. I have some jQuery code that should execute on the click event. It should trigger a post action (which is functioning correctly) and then reload everything with ...

jqueryajaxasp.net-mvc

jQuery Confusion: The Mystery of Undefined Global Variables

Check out the code snippet below: <script> var vars = {} $("document").ready(function() { vars.var1 = 2; alert(vars.var1); //displays 2; }); alert(vars.var1); //displays undefined </script> What could ...

jquery

The HTML code displays the changes in output after resizing the screen

Currently, I am utilizing canvas(graph) within my Angular JS UI5 application. My main goal is to increase the width of the graph. However, whenever I attempt to adjust the size of the Graph, it remains unchanged. Interestingly, when I shrink the screen, th ...

htmlangularjs

Modify the state of an individual item within an array

I have a list of items that I need to show a loader for and hide it once a certain action is completed. For instance, below is my array of items: [ { "id": "69f8f183-b057-4db5-8c87-3020168307c5", "loading": null } ...

javascriptreactjsstate

Dealing with a problem in CSS Flexbox while aligning child elements using the `align-self`

Check out this test code here - https://jsfiddle.net/8dgeh9r3/1/ I have set up two scenarios to simulate. In the first scenario, there is a main parent flex container with multiple intermediary parents (which are also flex boxes that inherit properties fr ...

htmlcssflexbox

Vue.js error: Unable to locate requested resources

Recently, I've been encountering a curious issue when trying to access a specific component in my application. When I manually type the URL http://localhost:8080/detailed-support/start into the browser, the content loads without error. However, none o ...

javascripthtmlvue.js

Nested v-for problem confusion

I am encountering an issue with my code and I'm wondering if anyone can help me troubleshoot it. The problem is that whenever I click on the content of one panel, all panel contents with the same index expand or collapse instead of just the one I clic ...

javascriptvue.jsvuetifyjs3

Delay calls to JavaScript functions, ensuring all are processed in order without any being discarded

Is there a way for a function to limit the frequency of its calls without discarding them? Instead of dropping calls that are too frequent, is it possible to queue them up and space them out over time, say X milliseconds apart? I've explored concepts ...

javascripttask-queuethrottlingrate-limitingdebouncing

Creating a radio button along with a submit button that redirects to a different local HTML file

Can someone please help with this code? I'm trying to redirect to the value of each radio button when it's clicked. Any guidance or JavaScript code would be greatly appreciated. Thank you. I've tried multiple solutions but none of them seem ...

javascripthtmlcssradio-button

Changes made to index.php are not reflecting on the WordPress website

Currently making changes to my WordPress theme and just included a new div with the class "sidebar." However, I'm encountering an issue where it's not updating on the homepage of the website. Strangely enough, the stylesheet does seem to be updat ...

phpcsswordpress

Is it possible to halt the set timeout function in an AJAX call once a specific condition has been satisfied?

I have the following code snippet that is currently functioning correctly, but I am looking to implement a way to disable the automatic refreshing once a specific condition is satisfied. enter code here $(document).ready(function() { ...

javascriptjqueryajax

What is preventing my CSS variables from functioning in my Vue component that is utilizing SASS?

Currently, I am working with sass and vue version-3. Within one of my components, the following code is present: HelloWorld.vue : <template> <div class="greetings"> <h1>{{ msg }}</h1> <h3> You’ve succe ...

cssvue.jssass

How can I add scrolling functionality to the active list item with React?

I created a music player that allows users to search for songs by artist. Check out the CODE SANDBOX here! Take a look at how the SongsList component is structured in my project: const SongsList = (props) => { const { loading, errorMess ...

javascriptreactjsscrollbaraudio-player

Trouble with PUT request for updating user password using Express.js with mongoose

I've encountered a puzzling issue while working on my Express.js application. Specifically, I have created an endpoint for updating a user's password. Surprisingly, the endpoint functions flawlessly with a POST request, but fails to work when swi ...

javascriptexpressrestmongoose

Jquery is failing to handle multiple inputs

I am currently working on a system that can handle multiple Yes/No questions. However, every time I try to submit the form, I encounter an error in the console that I cannot identify, and no data is returned from the query. Previously, I used an Array to s ...

javascriptjqueryhtmlajax

Break up a line within an ionic element by inserting a linebreak tag

Currently, I am constructing an app using ionic framework and facing a challenge in inserting a linebreak within an ionic tag to ensure proper display inside the designated container... <h2>{{caravan.model}}</h2> ...

htmlcssangularjsionic-frameworktags

Verification of form with multiple valid tags

Utilizing the jQuery validation plugin to validate a form, I have implemented the following CSS styling: label.valid { width: 24px; height: 24px; background: url(../images/form_tic.png) center center no-repeat; display: inline-block; t ...

jqueryvalidation

Issue with Installing Vue CLI Plugin Vue-ChartJS

For my project, I am utilizing Vue CLI and planning to incorporate the vue-chartjs plugin. In order to set it up, I followed this instructional guide: . However, upon running the process, I encountered an error with the npm package: ...

javascriptvue.jschart.jsvuejs3vue-cli

Caution: A non-boolean attribute received a value of `false`. What is the correct way to provide a boolean value?

I'm encountering an issue with the code below: react-dom.development.js:67 Warning: Received false for a non-boolean attribute high. If you want to write it to the DOM, pass a string instead: high="false" or high={value.toString()}. Despi ...

javascriptreactjsnext.js