I've created a sidebar containing some icons - some top-aligned, some bottom aligned. When the browser is resized the icons overlap and I'd rather have the bottom icons not go any higher once the hit the top icons and overflow. I've tried things like "clear:both", adding margins & padding to the <ul>s' but haven't managed to come across an obvious solution. Would anyone know a way for the icons to main their fixed positioning but not overlap on resize?

Code:
<html>
<head>
	<link rel="stylesheet" type="text/css" href="_stylesheets/emstyles2.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	
	<title>Icon Overlap Problem</title>

	<style>
	#sidebar {
		width: 20em;
		margin-left:-17em;
		position:fixed;
		top: 0;
		bottom: 0;
		left: 0;
		height: 100%;
		overflow:none;
		z-index:2;
		color: #ffffff;
		background-color: #333333;
	}
		
	#dummy-column {
		width: 20em;
		float:left;
		margin-left:-17em;
		height:100px;
		position:relative;
	}


	#sidebar #nav ul {
		width:3em; 
		position: absolute; 
		margin:0; 
		padding 0;
		/*clear: both;*/
	}
	
	#sidebar #nav li {padding: .5625em; list-style:none;}
	#sidebar #nav img{height: 1.875em; width: 1.875em}
	#sidebar #nav .top{top:0; right: 0; }
	#sidebar #nav .bottom{bottom:0; right: 0; }
	#sidebar #nav .top li{border-bottom: 2px groove #454545}
	#sidebar #nav .bottom li{border-top:  2px groove #454545}

	#sidebar #nav {
		width: 3em;
		height: 100%;
		float: right;
		overflow: auto;
		background-color: #2e2e2e;
		border-left: 2px groove #454545;
		overflow:auto;
	}

	</style>
</head>
<body>

		<div id="sidebar">
			<div id="nav"><ul class="top">
				<li><img src="#"></li>
				<li><img src="#"></li>
				<li><img src="#"></li>
				<li><img src="#"></li>
			</ul>
			<ul class="bottom">
				<li><img src="#"></li>
				<li><img src="#"></li>
				<li><img src="#"></li>
			</ul></div>
		</div>
	<div id="dummy-column"></div>


</body>
</html>