By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,968 Members | 1,681 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,968 IT Pros & Developers. It's quick & easy.

How to make a Div to stick to its position across various monitor sizes

P: 3

This has been driving me crazy. I have refactored all my css code to be percentage driven and all positions to be relative (assuming they would relatively change their position depending on the size of the screen). I have tried with absolute positioning as well. Didn't help. I just have a normal div with a border which I want to display as is across all monitor sizes. However, that is not the case. It appears as I want to on a laptop screen, but on a CRT monitor/widescreen LCD or a projector the settings are way off. Appreciate any help in this. Here's my relevant css and html :
Expand|Select|Wrap|Line Numbers
  1. CSS:
  3. #contentDiv {
  4.     border: #D1CFCA solid 7px;
  5.     border-top-width: 37px;
  6.     padding: 1em;
  7.     width: 90.25%; 
  8.     height: 72%;
  9.     position: relative; 
  10.    left: 0%; 
  11.     top: 3%; 
  12.     padding-left: 8%;
  14. }
  15. XHTML : 
  16. <div id="contentDiv">
  17.         <br/><br/>
  18.             <ui:insert name="pagesContent" />
  19.         </div>
Mar 2 '12 #1
Share this Question
Share on Google+
5 Replies

Expert 5K+
P: 7,435
So you set them to those percentages but they are a percentage of what?
Mar 2 '12 #2

P: 3
Sorry I was away for some time.
Well, I'd believe its a percentage from the margin of the screen. I did try using margin-top as well, without too much progress. Can you please tell me what I am doing wrong ?
Mar 8 '12 #3

Expert 5K+
P: 7,435
Percentages are a percentage of its parent element. What is the parent element set to? If it, too, is a percent of something, what is that parent set to? Eventually one of those elements must be set to some unit value, such as px or em, or reached all the way up to the viewport (the html element).
Mar 8 '12 #4

P: 3
Thank you for your reply. I do not know how to set a parent to my current div (or to set the parent element to some unit value) :(
If you could please show me a sample, or a way, I could do some modifications and post back the results.
(I am going to be checking now on a trial and error basis if I can set html to a margin and give it a position, absolute or relative, I dont know and then see if my contentDiv will be positioned based on the html parent positioning).
Mar 8 '12 #5

P: 1
The default container for a page will be the <body></body> if there is not another element containing your current div similarly <html></html> is the container for the body but if for example you set
body {

it wi
Mar 16 '12 #6

Post your reply

Sign in to post your reply or Sign up for a free account.