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

Switching background images on click with a smooth transition

I'm in the process of creating a website and I want to be able to change background images with ease when clicked, like using fade in or fade out effects. The onclick functionality is already implemented with jQuery, but I'm having trouble incor ...

jqueryhtmlcssfadeineasing

Executing code upon the completion of jquery's slideUp() function

Is there a method to trigger the execution of html() only after the completion of slideUp()? <p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor elit</p> $(".test").slideUp().html(""); I attempted using ...

javascriptjqueryhtmlslideup

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

javascriptjqueryhtmlcss

Ways to customize the appearance of the Next/Prev Button in Griddle

Here is the scenario that has been implemented: nextClassName={'text-hide'} nextText={''} nextIconComponent={ <RaisedButton label='Next' />} As a result, a Next Button with a wrapper div above the but ...

cssreactjsmaterial-uigriddle

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Just starting out with CSS/HTML and looking for guidance on creating a table with a variable number of rows. Any tips on how to achieve this using CSS? I'm aiming to replicate a table with a similar structure, but struggling to figure out how to defin ...

htmlcss

Template for PHP website including code

I am working on integrating this code into my index.php page in order to streamline the process of creating separate pages for my website using only simple HTML files. For instance: Instead of repeating the same template code on multiple pages like index, ...

phphtmlphp-include

Modern design featuring soft borders that blend into the background

I am in the process of bringing a unique webpage layout to life. The design is a bit unconventional, and I'm not sure if it's feasible. Essentially, I plan to have a fixed-width content box of 900px positioned in the center of the page body. I ai ...

htmlcsslayoutfluid

Ways to prevent mouse selection in an input field without disabling or making it read-only

Imagine this scenario: <input type="text"> The task at hand is to prevent text selection within the <input> field. ...

javascripthtml

Easily Update Your Div Content by Simply Clicking a Single Link/Button

I am in need of assistance here. My goal is to display dynamic content within a div. Below you will find the code I currently have: <script type="text/javascript"><!-- function AlterContentInContainer(id, content) { var container = documen ...

javascriptjqueryhtmlcss

Should the username be specified but the password left blank, then an error message will be shown

<div class="form"> <h1>Sign In</h1> <form action="" method="post" name="login"> <input type="text" name="username" placeholder="Enter username" required /> <input type="password" name="password" placeholder="Enter password" ...

phphtml

Struggling with validating forms with JavaScript

I'm having trouble with the following JavaScript code: <script type="text/javascript"> function checkDetails(search) { var search = documment.getElementById('query'); if(search.value ==''||search.val ...

javascripthtmldom-events

Allow the checkbox to only be functional for one use

Toggle the checkboxes between enable and disable based on user's choice to edit or cancel operation. This functionality has been tested on both my Android phone and tablet devices. Upon loading the page, the HTML code appears like this: <div class ...

jqueryhtmljquery-mobile

jquery toggleClass not retaining previous click event

I came across a show/hide function that seemed promising for my issue, which I found here (credit to the original author). Inspired by this, I created a demonstration on JSFiddle (https://jsfiddle.net/q7sfeju9/). However, when attempting to show rows, it d ...

javascriptjquerycssasp.net-mvc

Issues arising from script tags causing disturbances in CSS

As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes ...

csstwitter-bootstraphead

JavaScript resets the timer whenever the page is refreshed

Is there a way to maintain the timer in a quiz even after refreshing the page? <html><h1>Js Timer</h1> <div style="font-weight: bold;" id="quiz-time-left"></div> <script type="text/javascript"> var total_seconds = ...

javascriptphphtmlcodeigniternan

Link HTMLMediaElement with Android's playback controls

For my HTML/Javascript audio player that supports playlists, I have implemented a feature where the ended event automatically plays the next media in line. Everything works smoothly when using the player on Android Bromite browser, including the playback c ...

javascriptandroidhtmlmediaelement

Custom Sizing for Bootstrap Modals

I need assistance with creating a dynamic bootstrap modal that adjusts its width based on the content and includes a vertical scrollbar when needed. Although the vertical scrollbar is functioning correctly, the horizontal width appears to be static. C ...

csstwitter-bootstrap

align the text to the left in the center of the page

.center { margin: 0 auto; display: table; } .center .content { display: table-cell; } These CSS styles are used to center align the container with the class .center, while also keeping its contents (in .content) left aligned: <div class="center" ...

htmlcsstext-align

What could be the reason for the email not being displayed in the form?

I am attempting to automatically populate the user's email in a form when a button is clicked, preferably when the page is loaded. However, I am encountering issues with this process. This project is being developed using Google Apps Script. Code.gs ...

javascripthtmlgoogle-apps-script

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

javascriptjqueryhtmlcssangularjs