Problem with div borders

Please copy this codes in a html file and then browse it:
<code>
<html>
<head>
<style>
#container
{
width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid gray;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
border-left: 1px solid gray;
}
#content
{
margin-left: 200px;
margin-right: 200px;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
some text
</div>

<div id="leftnav">
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
</div>
<div id="rightnav">
right
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
</code>
As you see the right sidebar border is not complete when I have more text in left or content columns,
How can I fix this?

Problem with div borders

setareh

4hero

D_Blackwell

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week