Encountering some issues with the HTML code below when resizing the window:
1: The right bar suddenly drops down if the width is made too small.
2: The spacing between the content and the right bar expands as the window width increases.
<style type="text/css">
#content {
width: 80%;
float: left;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="content">contents</div>
<div id="rightbar">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
</div>