CSS with some comments. Also, to show which div go there, I've added some text to the html code as well to show which div is left, right, top and bottom. Perhaps this gives a better understanding of things.
Also, do note that "fixed positioning" means an element stays on the same place in the window no matter how much you scroll. This also means that it stays in the same place on screen unless you move the actual window around.
<style type="text/css">
/* applies to divs with these ids, i.e. all "border divs" */
#top, #bottom, #left, #right
{
background: #a5ebff; /* border color */
position: fixed; /* fixed positioning, see comment above */
}
/* only applies to #left and #right divs, i.e. left and right border */
#left, #right
{
/* vertical border needs to go from top to bottom, i.e.
* 0 distance from top, 0 distance from bottom */
top: 0;
bottom: 0;
/* div width = border thickness for vertical border */
width: 15px;
}
/* left div (border) has to be positioned 0 distance from left side */
#left { left: 0; }
/* ... 0 distance from right side */
#right { right: 0; }
/* pretty much the same reasoning as for the vertical borders above */
#top, #bottom
{
/* that is, they should go from 0 distance from left side, to 0 distance from right side */
left: 0; right: 0;
/* these divs extend horizontally, so the div height becomes the border thickness */
height: 15px;
}
/* and the top border should be positioned 0 distance from top */
#top { top: 0; }
/* ... 0 distance from bottom */
#bottom { bottom: 0; }
/* body padding needs to match border width, otherwise you can't scroll content
* into view */
body
{
padding: 15px;
}
</style>
</head>
<body>
<!-- these 4 elements are your borders -->
<div id="left">
<br/>
L<br/>
E<br/>
F<br/>
T<br/>
</div>
<div id="right">
<br/>
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
</div>
<div id="top">TOP</div>
<div id="bottom">BOTTOM</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Oh, one more thing. Styless are added up for an element. So a rule that applies to all div elements will also be set for the four divs with ids #left, #right etc. However, specifying a "CSS selector" using "#left" rather than just "div" is more specific, so this rule will override any settings made by a div rule, should they collide. Otherwise they are just put "on top" of existing rules.
