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 :

Expand|Select|Wrap|Line Numbers

 
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>

Mar 2 '12 #1

Subscribe Post Reply

2455

drhowarddrfine

7,435

Expert 4TB

So you set them to those percentages but they are a percentage of what?

Mar 2 '12 #2

happybuddha

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

drhowarddrfine

7,435

Expert 4TB

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

happybuddha

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

Davec49

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

Mar 16 '12 #6

Similar topics

Dual Monitor Support

by: KJM | last post by:

How can I detect if the user has dual monitors and then how do I control which monitor a form is displayed on. Currently my forms always come up on my right monitor. What if I want to have it...

Visual Basic 4 / 5 / 6

formatting regarding monitor sizes...

by: Edward | last post by:

I am designing my first site in html and neet to know something. When viewed in 800x600, the site is readjusting and squasing all the text - it looks awful. Is there a tag(?) that I can use to...

HTML / CSS

determine monitor resolutions?

by: Nate Hekman | last post by:

I need to programmatically determine the dpi of individual monitors on a multimonitor system. I'm using Screen.AllScreens to get the monitors but that only tells me their resolution in pixels. ...

.NET Framework

Monitor unblock priority

by: vooose | last post by:

Suppose execution of a particular thread T1 hits Monitor.Enter(obj); //critical section and blocks at the first line. (ie someone else is in the critical section) Now suppose more threads...

C# / C Sharp

Suggestions For Touch Screen Form Sizes [C#]

by: MikeY | last post by:

Hi Everyone, I'm looking for suggestions for touch screen form sizes. Or better yet dealing with forms very various screen sizes. How to deal with anchoring buttons etc and so they don't overlap...

C# / C Sharp

Independent monitor control

by: John | last post by:

I'd like to write a programme that runs on a PC with two monitors. The application would be used in a shop, with one monitor for shop assistant and the other for the customer. The two must show...

C# / C Sharp

How does Microsoft expect developers/designers to make stuff work for everyone?

by: Nathan Sokalski | last post by:

Ever since I found out that they didn't give us a way to install both IE6 and IE7 on the same machine, I have been more frustrated and annoyed with Microsoft than I ever have been with any company...

ASP.NET

How to make GUI independent of the monitor Resolution ???

by: vishwaskothari | last post by:

Hi, Is there any way that the GUI can be made independent of the resolution? And how to load a form in VB in its Maximize position? regards vishwas

Visual Basic 4 / 5 / 6

How do I implement Accounts across various modules.

by: Bhoomikakaiya | last post by:

Hi, I am designing the Accounting portion in our ERP System using Microsoft Platform. There are lots of challenges ahead of me. Scenario is : 1. Create an Account for any new Customer. Be it...

Software Development

Float/position textbox/table over image

by: vlsbnapa | last post by:

I have a box of text that I would like to position over an image for an email blast. Now, email clients don't like the following: css, position (absolute or relative), background image in a table...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA