I am the main content and live within the natural flow or order of elements in the document. My position is static though my maker has not stated this in my CSS instructions. This is because I am clever enough to position myself this way naturally.
Here is the CSS for this page minus the stylistic elements:
body {
margin-top: 10%; /* to make content clear the top */
/* zero margins enable placement to edge */
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
#content {
width: 60%;
margin-left: auto;
margin-right: auto;
}
#top {
width: 100%;
position: fixed;
top: 0;
z-index: 1; /* places div above left and right divs */
}
#bottom {
width: 100%;
position: fixed;
bottom: 0;
z-index: 1; /* places div above left and right divs */
}
#left {
width: 50px;
position: fixed;
left: 0;
/* zero top and bottom make div stretch to height of screen */
top: 0;
bottom: 0;
padding-top: 50px; /* to make left content clear the top div */
}
#right {
width: 50px;
position: fixed;
right: 0;
/* zero top and bottom make div stretch to height of screen */
top: 0;
bottom: 0;
padding-top: 50px; /* to make right content clear the top div */
}
I am the main content and live within the natural flow or order of elements in the document. My position is static though my maker has not stated this in my CSS instructions. This is because I am clever enough to position myself this way naturally.