CODEWITHSUNDEEP
htmlcsspositioningscreen-resolution
aftard
aftard

Reputation: 41

How to fix box position in css irrespective to screen resolution?

For the header i put: <link href="styles.css" rel="stylesheet" type="text/css"></link> the script I've given in the body is:

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

in css the I've given id script 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 problem is when I change the screen resolution from 1366x768 to any higher ...the box placement is changed ... I just want to fix the box position irrespective to screen resolution

Upvotes: 2

Views: 11553

Answers (2)

kinakuta
kinakuta

Reputation: 9037

I'd recommend using percentages instead of pixel values then:

#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;
}

The percentages here are just examples - you'd need to determine where to put it relative to your desired layout by fiddling with the percentage values. Here's an example of a box positioned with percentage values: http://jsfiddle.net/RjgHy/

Upvotes: 2

chh
chh

Reputation: 870

Maybe you should use position:fixed instead of position:absolute?

http://davidwalsh.name/css-fixed-position

Upvotes: 3

Related Questions