Previous Message
Next Message

Resolution question

Sent by francky on 30 March 2006 22:10

Riva Portman wrote:

>Hi all,
>I am reworking a site (it is still in the very rough beginning stage) 
>and I find that when I set everything lined up in 600x800 and switch to 
>1024x768, the spacing changes and vice versa.  Is there some way to make 
>the right edges line up no matter what the resolution?  The url is: 
>and the css is:
>h1 {
>    letter-spacing: 0.75em;
>    color: #369;
>    padding: 0.25em 0.33em 0.125em;
>    border: 3px double #224;
>    background: #369;
>    margin-top: 5px;
>    margin-left: 15px;
>    margin-right: 15px;
>div#main {
>    position: absolute;
>    top: 8.2em;
>    left: 16.5%;
>    width: 73%;
>    margin: 1.2em;
>    margin-top: 2em;
>    padding: 1em 1.5em;
>    border: 3px double #224;
>    font-family: Arial, Helvetica, sans-serif;
>    font-size: 14px;
>    background: #6699CC;
>    letter-spacing: 1px;
>    color: #000;
Hi Riva,
As you see, the header (here the h1) has a fixed margin-right of 15px, 
while the #main container is positioned in % of the screen width, 
combined with margins in em's. One right side is fixed, and one is 
flexible > in general it's not lining up.
- Also within one resolution there can be differences: as you resize the 
window, you see the header staying at the 15px from the right, but the 
content-container is moving from more distance to less distance.
Setting both in the same way (I shoud say: the 15px fixed) will solve 
the problem.
That is: the #main can be positioned at "right: 15px" with a "margin: 0 
1.2em" (only top/bottom), and a % for the width. The "left: 16.5%" then 
can be canceled.


css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: