I am currently working on building a website design, and I have a menu positioned on the right side of the layout. Below is the code for the menu along with an explanation.
#rightmenu {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
width:30px;height:578px;
border-bottom-right-radius:10px;
border-top-right-radius:10px;
float:right;
margin-top:-580px;
}
This 'rightmenu' will be attached to the box on the right side and will always remain in place as the content moves.
#content {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
width:800px;height:auto;
min-height:400px;
margin:0 auto;
}
The content box has a width of 800 pixels and automatically centers itself on the screen. I want the 'rightmenu' to stay connected to this centered content box. This is how it should look at 800px:
If the web browser window is smaller than 800px (the minimum size), the layout will adjust accordingly:
And if the web browser window is larger than 800px, it will expand to fit: