Tips for creating a consistently positioned div element, regardless of the screen size

Having trouble positioning two bars with green or blue filling in the bottom right corner? They keep moving around and not staying in place regardless of screen size. Check out how they are off-screen here

Below is the CSS-Styling + HTML code:

.element-1 {
  writing-mode: tb-rl;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 10%;
  height: 20px;
  position: fixed;
  margin-top: 38.5%;
  margin-left: 75.5%;
}

.element-2 {
  writing-mode: tb-rl;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 10%;
  height: 20px;
  position: fixed;
  margin-top: 38.5%;
  margin-left: 91.7%;
}

.meter {
  background: rgba(65, 60, 60, 0.39);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  box-shadow: inset 0 -1px 1px rgb(184, 45, 45);
  display: block;
  top: 8%;
  width: 270px;
  height: 20px;
  margin-bottom: 10px;
  padding: 5px;
  margin-left: 10px;
  position: absolute;
}

.meter>span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #2bc253;
  background-image: linear-gradient(to bottom, #0ff, #1e90ff);
  box-shadow: inset 0 2px 9px rgba(51, 48, 48, 0.3) inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: width 2s ease-out;
}
<div class="bars">
  <ul>
    <li>
      <div class="meter cadetblue element-1">
        <span data-progress="0" style="width:0;" id="bar-hunger"></span>
      </div>
    </li>
    <li>
      <div class="meter element-2">
        <span data-progress="0" style="width:0;" id="bar-thirst"></span>
      </div>
    </li>
  </ul>
</div>

htmlcss

Answer №1

If you want to ensure a div stays in a fixed position on the page, simply apply position: fixed;

This CSS property will be effective across all browsers with the exception of IE6 and certain mobile devices.

.element {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Answer №2

When using position: fixed and aiming for placement at the right bottom corner, it is recommended to avoid setting any values for top, left, margin-top, or margin-left.

Instead, opt for bottom: 0 and right: xx, where "xx" represents a pixel or percentage value (percentage being preferable for responsive design). Additionally, set the width and height properties for the bars in either pixels or percent, with the possibility of including a min-width as demonstrated below.

For instance:

.bar {
  position: fixed;
  bottom: 0;
  width: 2%;
  min-width: 10px;
  height: 20%;
  border-radius: 5px 5px 0 0;
}

.bar1 {
  right: 10%;
  background-color: orange;
}

.bar2 {
  right: 20%;
  background-color: blue;
}
<div class="bar bar1"></div>
<div class="bar bar2"></div>

Answer №3

.element-1 {
        position: fixed;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform:rotate(90deg);
        transform: rotate(90deg);
        width:10%;
        height:20px;
        position: fixed;
        margin-top: 38.5%;
        margin-left: 75.5%;
    }
    .element-2 {
        position: fixed;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform:rotate(90deg);
        transform: rotate(90deg);
        width:10%;
        height:20px;
        position: fixed;
        margin-top: 38.5%;
        margin-left: 91.7%;
    }

Answer №4

To ensure the elements stay in place, utilize the fixed position property.

.element-1 {
        position: fixed;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform:rotate(90deg);
        transform: rotate(90deg);
        width:10%;
        height:20px;
        position: fixed;
        margin-top: 38.5%;
        margin-left: 75.5%;
    }
    .element-2 {
        position: fixed;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform:rotate(90deg);
        transform: rotate(90deg);
        width:10%;
        height:20px;
        position: fixed;
        margin-top: 38.5%;
        margin-left: 91.7%;
    }
.meter {
            background: rgba(65, 60, 60, 0.39);
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            box-shadow: inset 0 -1px 1px rgb(184, 45, 45);
            display: block;
            top: 8%;
            width: 270px;
            height: 20px;
            margin-bottom: 10px;
            padding: 5px;
            margin-left: 10px;
            position: absolute;
    }
    .meter > span {
        display: block;
        height: 100%;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        background-color: #2bc253;
        background-image: linear-gradient(to bottom, #0ff, #1e90ff);
        box-shadow: inset 0 2px 9px rgba(51, 48, 48, 0.3) inset 0 -2px 6px rgba(0,0,0,0.4);
        overflow: hidden;
        transition: width 2s ease-out;
    }
<div class="bars">
        <ul>
            <li><div class="meter cadetblue element-1">
                <span data-progress="0" style="width:0;" id="bar-hunger"></span>
              </div></li>
              <li><div class="meter element-2">
                <span data-progress="0" style="width:0;" id="bar-thirst"></span>
              </div></li>
        </ul>
    </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

How can Angular display an alert when no items are visible?

I want to display a message saying "Item doesn't exist" when the item is not found. Suppose this is my list: user 0 user 1 user 2 The following code displays the list above: <ng-container *ngFor="let user of users | async; let i = index"> ...

htmlangulartypescriptfirebase

Is it possible to view the CSS of a PDF file in print template mode using Chrome?

https://i.stack.imgur.com/XlcWm.png Currently facing an issue with debugging CSS on my PDF template. I am unable to inspect the styles directly in the CSS due to limitations. When using inspect element in Chrome, only the styles for text and elements are ...

htmlcssgoogle-chromefirefoxgoogle-chrome-devtools

Segment will expand completely upon inserting a new division

Lately, I've been trying to simplify things by consolidating my JavaScript functions into one file instead of using multiple separate files. The idea was to merge all the functions together and wrap each one in its own function so that they can be eas ...

javascripthtmlcss

Is there a way to verify if a checkbox has been checked?

Having trouble with this code: if($('#primayins').prop('checked')) { $("#tx_nm0x0_pricingplan").val(1); } else { $("#tx_nm0x0_pricingplan").val(2); } It keeps returning false consistently ...

javajavascriptjqueryhtml

Elements that allow for asynchronous data submission without requiring a traditional submit button

Hey there, I could really use some help with this puzzle I'm trying to solve. Here's the situation: <ul> <li>Number: <span id="Number">123</span></li> </ul> I want to set up a connection between t ...

javascripthtmlangulartypescriptasynchronous

When viewed on a mobile device, the contact information bar should vertically collapse

Here is the code snippet I am working with: <div class="topbarsection"> <ul> <li class="alignleft"> <a href="#">Office Address</a> </li> <li class="aligncenter"> Office Timings ...

htmlcssmobile

Update the parent node in the Google Org Chart

This is my first time working with Google Charts and I have a couple of questions: Is there a method in the API to update the parent of an existing node? I am facing a challenge where I need to build a tree structure top-down, which means that I know the ...

javascriptjqueryhtmlcssgoogle-visualization

Insert the characteristics of the object into the header of the table, and populate the rows of the table

I have created an HTML table that displays specific object properties when the mouse hovers over a designated object. For example, hovering over the dog object will display the dog's name. I want to expand this functionality to also show the cat' ...

javascriptjqueryhtmlarrays

Steps for aligning floating DIVs in the center of a parent DIV

Why is the text alignment not working as expected when I have three divs within a parent div that need to be center aligned? If you'd like to see the issue in action, check out this Demo fiddle <div class="container_alt"> <div class= ...

htmlcss

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried using ...

htmlcssencodingutf-8

Is it necessary for two sibling elements to be of the same type in order for their margins to collapse together?

I am currently working on enhancing the visual appearance of a Bootstrap 4 card and encountered an issue: https://i.stack.imgur.com/p8Qzhm.png The spacing between the About the gig heading and the top Date item appears to be uneven. I would like to make ...

htmlcssmargin

Issues arise when attempting to display Sphinx documentation containing SVG images on Internet Explorer 11

I have been working on building Sphinx documentation and incorporating a UML diagram generated as an SVG image using graphviz. The SVG file is embedded in the auto-generated HTML template from Sphinx. While the SVG displays perfectly fine on Chrome and Fi ...

htmlsvginternet-explorer-11python-sphinxgraphviz

The footer row in jqgrid is experiencing issues with functionality

I am trying to create a jqgrid table with three footer rows to display a total at the end of each grid. Following the guidance in this helpful post from Oleg on How to create two footer rows in jqgrid, I was able to modify the code provided to show three t ...

jqueryhtmlcssjqgridsalesforce

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted

Is there a way to pause an animation at the 50% mark for 2 seconds and then resume? P.S. The setInterval method is not recommended! function pauseAnimation() { document.getElementById("0").style.animationPlayState = "paused"; }; var pauseInterval = set ...

javascripthtmlcsscss-animationskeyframe

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

javascriptjqueryhtmlcss

Can you modify a single attribute for multiple child elements under a parent tag in Visual Studio Code simultaneously?

Imagine a scenario where you are faced with 30-40 options and need to update the name attribute from blank to something more appropriate. Is there a method in visual studio code that allows you to do this in one go? It would be a fantastic feature to have. ...

htmlvisual-studio-code

How to toggle hidden links with AngularJS or vanilla JavaScript with a click事件

When the "Show all" button is clicked, I would like to display all elements. If the "1st half" link is clicked, I want to show "abc", "def", and "ghi". When the 2nd link "2nd half" is clicked, I want to display "jkl", "mno", and "pqr". Then, when the "show ...

javascriptjqueryhtmlangularjs

Elevate your Material UI Avatar with an added level of

Attempting to give a MUI Avatar component some elevation or shadow according to the documentation provided here. <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" /> Enclosing the Avatar within a paper or Card element increases the size o ...

javascriptcssreactjstypescriptmaterial-ui

Convert your flexible designs into dynamic HTML with our Flex to HTML/A

Looking for a solution to transform Flex code into Html/Ajax code. Most of my Flex code includes datagrids, buttons, and text labels. ...

htmlajaxapache-flex