Tips for aligning box position in CSS regardless of screen size fluctuations

Question

Tips for aligning box position in CSS regardless of screen size fluctuations

My header code includes:

<link href="styles.css" rel="stylesheet" type="text/css"></link>

The script placed in the body is:

<input name="search" type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content" AUTOCOMPLETE="off" size="40"><

The CSS style I have applied to the 'box' ID is:

#box
{
  width : 270px;
  height : auto;
  overflow : auto ;
  border : 1px solid #C5C5C5;
  background : #F8F8F8;
  position : absolute;
  left : 460px;
  top : 286px;
  border-top : none;
  text-align : left;
  display : none;
}

The issue arises when changing the screen resolution from 1366x768, causing the box position to shift. Is there a way to ensure the box remains fixed regardless of the screen resolution?

html css positioning screen-resolution

Answer 1

Answer №1

Have you considered using position:fixed instead of position:absolute?

Answer 2

Have you considered using position:fixed instead of position:absolute?

Answer 3

Answer №2

If you want more flexibility, try using percentages instead of fixed pixel values:

#box
{
  width : 270px;
  height : auto;
  overflow : auto ;
  border : 1px solid #C5C5C5;
  background : #F8F8F8;
  position : absolute;
  left : 33%;
  top : 33%;
  border-top : none;
  text-align : left;
  display : none;
}

Remember that the percentage values shown here are just examples - you'll need to adjust them to fit your specific layout requirements. Check out this example of a box positioned using percentage values: http://jsfiddle.net/RjgHy/

Answer 4

If you want more flexibility, try using percentages instead of fixed pixel values:

#box
{
  width : 270px;
  height : auto;
  overflow : auto ;
  border : 1px solid #C5C5C5;
  background : #F8F8F8;
  position : absolute;
  left : 33%;
  top : 33%;
  border-top : none;
  text-align : left;
  display : none;
}

Remember that the percentage values shown here are just examples - you'll need to adjust them to fit your specific layout requirements. Check out this example of a box positioned using percentage values: http://jsfiddle.net/RjgHy/

Tips for aligning box position in CSS regardless of screen size fluctuations

Answer №1

Answer №2

Similar questions

The Boostrap background is failing to display as expected in CSS, and the `position: fixed` property is

The Fullpage.js embedded in an iframe is experiencing difficulty scrolling on iOS mobile devices

Create a Cutting-edge Navbar in Bootstrap 5.1 Featuring Three Distinct Sections: Left, Center, and Right

How can the default text color be adjusted in NSAttributedString when initialized with HTML dark mode?

How to Align Bootstrap 4 Navbar Brand Logo Separate from Navbar Toggler Button

Animation of hand-drawn letters using SVG technology

Styling based on conditions, hovering effects, and implementing ReactJS

Ways to conceal a form post-submission

Having trouble with some JS and Jquery codes not functioning properly in IE until the page is refreshed a few times. Any suggestions on how to fix this issue?

Retrieve information from the text input field and proceed with the action outcome

Display a list in thumbnail format on Wordpress

Creating a Standard DIV Element (JavaScript Code)

Wrap the text within the contenteditable div with the <p> tag

HTML and CSS: Centering elements inside div containers

PHP prepared statements do not seem to be effectively updating or inserting entire datasets

Is it possible to include a div above a centered image?

I recently attempted a meyers reset and now I'm struggling to get my unordered list to display in a horizontal layout

Unresponsive Hover Effect on iPad

Animating distance with the power of animate.css

In search of a render function that can effectively apply styles to HTML strings using React JS