CSS Positioning for multi screen resolution

[moogle1979]

<?php
// checks to see if person is logged in
if ($_SESSION['login'] == 1){
?>

Welcome, <?php echo $SESSION['name'] . "! (" . $SESSION['userid'] . ")"?>



Status: <?php echo $_SESSION['status']; ?>

Money: <?php echo $_SESSION['money']; ?>

Bank: <?php echo $_SESSION['bank']; ?>

Level: <?php echo $_SESSION['lvl']; ?>

HP: <?php echo $_SESSION['hp']; ?>

Exp: <?php echo $_SESSION['exp']; ?>

Logout

<?php
}
else {
?>

Please Login to Start Playing

Username:

Password:  




Lost Password?


<?php
}
?>

 

Welcome to Rigganmore

The Land of a Thousand Dreams

Not a Member?

[Wickham]

Your div#stats is inside div#header_user and stays in the same position relative to div#header_user when the resolution changes, but div#side_nav is not inside div#body so it moves to a different position at different resolutions. Change the closing tag and see if it does what you want:-

..............

The Land of a Thousand Dreams

/* moved below*/

Not a Member?

onmouseout="this.style.color = '#002a4c'">

alt="Pre-Registration" />

 

If this doesn't work, I would change every div from position: absolute to position: relative and set them all related to each other. I don't really like the way you have so many nested position: absolute divs.

[moogle1979]

Well for some reason because of all the nested div tags it will not validate for me, thanks for your help I will look into that

[Wickham]

Clear both doesn't achieve anything with a position: absolute div as they are taken out of the normal flow, so can't relate to a float of another div.

 

I don't think my solution achieves very much. I think you need a major restructuring.

[moogle1979]

Yes, I am thinking the same thing. I really thought I knew my CSS until I found out absolute and relative positioning and floats are not the best way to go. I just keep sitting there and thinking, without positioning how is a layout supposed to look good?

[Wickham]

I made a mistake with my edit above using /* instead of

 

Not a Member?

onmouseout="this.style.color = '#002a4c'">

alt="Pre-Registration" />

 

 

I really thought I knew my CSS until I found out absolute and relative positioning and floats are not the best way to go.

 

Relative positioning and floats ARE the way to go in my opinion but position: absolute is useful sometimes INSIDE position: relative divs.

Edited January 25, 2009 by Wickham

[moogle1979]

Everyone says margins, padding, absolutes, and floats are bad but I have everything working great will all those except this one little troublesome div.

 

Honestly I would not know how to position a layout without those items, I am sure there is a more professional way, but I am restructuring this website from deprecated css styles such as moz-opacity and opacity.

 

I am sure I am probably using styles not recommended by professionals but it does look really good besides that one troublesome div.