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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • happybuddha
    New Member
    • Mar 2012
    • 3
    #1

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

    Hello,

    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 :
    Code:
    CSS:

#contentDiv {
    border: #D1CFCA solid 7px;
    border-top-width: 37px;
    padding: 1em;
    width: 90.25%; 
    height: 72%;
    position: relative; 
   left: 0%; 
    top: 3%; 
    padding-left: 8%;
    
}
XHTML : 
<div id="contentDiv">
		<br/><br/>
			<ui:insert name="pagesContent" />
		</div>
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      So you set them to those percentages but they are a percentage of what?

        Comment

        • happybuddha
          New Member
          • Mar 2012
          • 3
          #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 ?

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              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).

                Comment

                • happybuddha
                  New Member
                  • Mar 2012
                  • 3
                  #5
                  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).

                    Comment

                    • Davec49
                      New Member
                      • Mar 2012
                      • 1
                      #6
                      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 {
                      width:100%;
                      height:100%;

                      }
                      it wi

                        Comment

                        Previous template Next
                        Working...