I just have a question about CSS formatting. I've been working on a few sites for a while doing mostly PHP and SQL coding, but now I have to do CSS layouts, and am getting kind of frustrated. Basically, I make the design on a 1600x1200 4:3 aspect ratio monitor, and when i switch to a lower resolution, or to a monitor with a different aspect ratio, the formatting is off. Everything is pushed too far to the left (probably since I'm specifying positioning using the left attribute in CSS). I've tried using px, em, percentage, but I don't think I'm looking in the right place to solve this problem. So my question is, what CSS attributes/code do you use to make sure that your elements stay in the right place. The code is posted under here. What should I use to make the layout stay in the same position regardless of monitor aspect ratio or resolution?
I'll start by saying don't use absolute positioning for the structural layout elements. It's just going to cause issues that are going to give you a headache. Absolute positioning isn't the devil (despite what some might lead you to believe) but it seems to get over used by people who don't have a firm grasp on it.
Any way, looking at your code you might try starting with something like this:
Code:
body {
padding: 0; /* remove the default padding */
margin: 0; /* remove the default margin */
font-size: 62.5%; /* set to roughly 10px asssuming most browsers are set to 16px */
text-align: center; /* needed for IE6 to center the whole shebang */
}
#container {
font: normal 1em/1.2em arial, helvetica, sans-serif; /* your new base fpnt size (roughly 10 px) */
width: 63em;
margin: 0 auto; /* centers the whole box in the screen regardlesss of screen size */
position: relative; /* this is now the parent of any direct child that 'must' be absolutely positioned */
}
You don't need to to use absolute positioning with your layout from what I see. One thing to consider is that elements 'stack' from top down. If you absolutely position them, they are ignored by other elements. Another thing is that if they are absolutely positioned, you need to set a width, but at a default your divs are going to be 100% width. When you Ab Pos them, they loose this and you have to keep unnecessarily having to redefine the widths.
As far as using percentages, well, for layout, don't. Percentages in distance are going to be based on the width of the browser. I for one don't browse full screen. So any page based on percentages is not going to display correctly. I mean don't use positioning in percentages when it's going to be based off of an element (the browser) when you have no control over the element.
He is positioning this div 20% from the left. If my browser is 1000px wide thats 200px. As I resize my browser this number changes making the layout move around.
If you open my Sources program, which is written in %ages, and pull the size around; it stays readable and in proportion. Isn't that what we are all aiming for.
I am using 1280x1024 resolution, but it works satisfactorily on all the resolutions that I have tested.
and then resize the page, you'll notice the left and right margins begin to grow and shrink accordingly. Making the layout sit in a dufferent spot based on my browser width.
Now if the original code was written like:
Code:
width: 80%;
margin: 0 10%;
this wouldn't be the issue as the left and right margins are the same and the total is 100%.
In his example though this is not the case. There is a fixed width and just a left margin. So his example will behave like the code I added to your sites CSS.
I wasn't really thinking about him when I remarked about the percentages.. I was just defending the use of them and saying that I had found them useful. Personally, why there are so many formats beats me. I worked in the TV trade all my working life. Formats changed but generally all together and only one in use. Having so many only unnecessarily complicates matters with very little gain and much loss.
Still; I must not get onto that 'Hobby Horse'. I'm getting to be an old Fuddy-Duddy.
Before you post, read our: 
.
