Strange PHP and CSS issue

I thought this would be better suited for the PHP forum since the issue seems to resolve around the endif area.

Below is the code that I am currently using for the login area on the sidebar for my Wordpress blog. I moved the li ul and div tags above the end if statement to get the site to work properly.

					<div id="cpanel"><h2 class="small">Control panel</h2>
					<ul>
						<li>Identified as <strong><?php echo $user_identity ?></strong>.
						<ul>
							<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>

							<?php if ( $user_level >= 1 ) : ?>
							<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write an article</a></li>
							<?php endif // $user_level >= 1 ?>

							<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Profile and personal options</a></li>
							<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Exit</a></li>
						</ul>
						</li>
					</ul>
					</div>
					<?php elseif ( get_option('users_can_register') ) : ?>
					
					<h2 class="small">Login</h2>
					<div id="login"><ul>
						<li>
						<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
							<p>
							<label for="log"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="17" /> User</label><br />
							<label for="pwd"><input type="password" name="pwd" id="pwd" size="17" /> Password</label><br />
							<input type="submit" name="submit" value="Send" class="button" />
							<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember</label><br />
							</p>
							<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
						</form>
						</li>
						

						<li><a href="<?php bloginfo('url') ?>/wp-register.php">Register</a></li>
						<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Recover password</a></li>
							</li>
							</ul>
						</div>
					<?php endif // get_option('users_can_register') ?>

Code (markup):

So since the above code works I'm not worried about getting it working, but I am interested in a weird quark that I found. It took me about an hour to realize why this was happening. The code that caused the error is below.

With the style tags the login was fine, but as soon as somebody logged in the side bar would shift down and to the left. This isn't anywhere in my styling and removing the login div allowed it to work without an issue. You login and everything remained the same.

I finally realized that it was because I was placing the div tag beneath the endif statement. I just wanted to know why this was happening as it caused me a lot of frustration, and I can see no reason for it to react like that.

Any help would be greatly appreciated. Sorry for the long post, I hope I explained everything well enough.

					<div id="cpanel"><h2 class="small">Control panel</h2>
					<ul>
						<li>Identified as <strong><?php echo $user_identity ?></strong>.
						<ul>
							<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>

							<?php if ( $user_level >= 1 ) : ?>
							<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write an article</a></li>
							<?php endif // $user_level >= 1 ?>

							<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Profile and personal options</a></li>
							<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Exit</a></li>
						</ul>
						</li>
					</ul>
					</div>
					<?php elseif ( get_option('users_can_register') ) : ?>
					
					<h2 class="small">Login</h2>
					<div id="login"><ul>
						<li>
						<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
							<p>
							<label for="log"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="17" /> User</label><br />
							<label for="pwd"><input type="password" name="pwd" id="pwd" size="17" /> Password</label><br />
							<input type="submit" name="submit" value="Send" class="button" />
							<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember</label><br />
							</p>
							<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
						</form>
						</li>
						

						<li><a href="<?php bloginfo('url') ?>/wp-register.php">Register</a></li>
						<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Recover password</a></li>
							
					<?php endif // get_option('users_can_register')
?>
</li>
</ul>
</div>

Code (markup):

 

As far as i can see in a quick glance, you have the opening div tag after the if, wich means that, when the if is not executed, you have a closing div tag without a opening one

 

Which is exactly why this has nothing to do with PHP.