Solved

<div> positioning with different screen resolution.

Posted on 2004-04-23
7
319 Views
Last Modified: 2008-02-26
hi.  i'm having trouble with <div> positioning.  the <div> tag has an <iframe> in it, i'm designing a website based on 1024x768 screen resolution.  viewing this website with 1024x768 resolution, all the contents of the page are relatively in place.  i've used a CSS positioning like this:

div.layout
{
width: 100%;
height 100%;
position: absolute;
}

but the contents of page shifts when viewed with screen resolution greater than 1024x768.  what seems to be the problem?  is it because i've used absolute positioning?  should i use relative positioning in my CSS?

what is the best solution?

thanks.
0
Comment
Question by:incevolebus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
7 Comments
 

Expert Comment

by:BrianGo
ID: 10905765
Some browsers may handle things differently but, IE6 ignores absolute positioning if you don't also include top and left values.

IE:

div.layout
{
width: 100%;
height 100%;
position: absolute;
top: 10px;
left: 10px;
}

paste this into a file and view it in Internet Explorer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
      <head>
            <title></title>
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <style>
                  div.layout {
                        width: 100%;
                        height 100%;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                  }
            </style>
      </head>
      <body>
      <div style="width: 500px; height: 50px; background-color: #cccccc;">div1</div>
      <br>
            <div class="layout"><iframe src="http://www.experts-exchange.com/"></iframe></div>
      </body>
</html>

You'll notice the frame is absolutely positioned over the div tag.  Now, delete the top: 0px and left: 0px lines from the css section and refresh the browser.  Notice the absolute positioning is no longer being used?

Here's a link to how IE handles positioning.

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/position.asp?frame=true
0
 

Expert Comment

by:BrianGo
ID: 10905792
Sorry, quick followup on your comment as well.  If you use a height and width of 100% (percent being the key) the div will expand to as large as the window will let it.  So, if you view on a resolution larger than 1024x768 it's going to use 100% of whatever you give it.  Rather than using %, use actual pixel values.  

height: 680px;
width: 1004px;

you won't want to use the actual, 1024 x 768 because you have to account for the scrollbars, taskbar, menus...and whatever else is visible on the screen.

IE has some properties you can retrieve from the window object.  run the script below in a web page.  I don't know if this will work in other browsers but it seems like it should.  availHeight and availWidth will be the numbers you want to use for the height and width.

<script language="javascript">
      var s = new String('');
      s+= 'availHeight = ' + window.screen.availHeight + '\n';
      s+= 'availWidth = ' + window.screen.availWidth + '\n';
      s+= 'height = ' + window.screen.height + '\n';
      s+= 'width = ' + window.screen.width;
      alert(s);
</script>
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 50 total points
ID: 10908153
If you use absolute positioning then the element does not reposition in response to changes in resolution of screen size. You are also using width:100% and height 100%.

Therefore on a change of resolution the positon remains static, but the size changes, and the content repositions in response to whatever other css properties or HTML attributes are being applied.

There is no where near enough information to give anything definitive, and we have no idea what the repositioning looks like so post a link to the page, or your code so we have some idea of what is causing the problem.

Cd&
 
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10908170
>>>IE6 ignores absolute positioning if you don't also include top and left values.

That is incorrect.  It merely requires that the element be given form... and I think the limitation is only in quirks mode.

Cd&
0
 

Expert Comment

by:BrianGo
ID: 11959319
give 'em to cobol.

i gave some misinformation...

 >>>IE6 ignores absolute positioning if you don't also include top and left values.

That is incorrect.  It merely requires that the element be given form... and I think the limitation is only in quirks mode.

Cd&

-Brian
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question