 position
I've laid out a web page, and it looks exactly how I like it. But I want it
to behave well should the user decide to increment the size of the text.
The layout is basically a solid colored bar down the left margin, a logo
across the top of the page, a box that contains a table of text on the left
side of the page, a box containing text on the right side of the page, and
then a footer containing links.
When I increment the text size enough, the columns will grow passed the
footer. I would prefer the footer to just be pushed further down the page.
How can I accomplish this? I've toyed with the 'position' values and can't
seem to come up with a solution. Thanks for your help!!! Here's my
stylesheet:
/* a solid color bar down the left side */
div.leftbar {
position: absolute;
top: 0px;
left: 9px;
width: 51px;
height: 700px;
background-color: #005BBF;
}
/* a big company logo at the top */
div.onepieceheader{
position: absolute;
top: 0px;
left: 60px;
height:147px;
max-width:600px;
background-color: #FFFF00;
}
/* box holding a table with text */
div.leftside {
position: absolute;
/* margin-top: 20px;*/
top: 147px;
left: 70px;
height: 513px;
width: 290px;
background-color: #FF00FF;
}
/* box containing text */
div.rightside {
position: absolute;
top: 147px;
left: 360px;
height: 513px;
width: 240px;
background-color: #00FFFF;
}
/* footer containing links */
div.footer {
position: fixed;
top: 650px;
left: 60px;
height: 50px;
background-color: #FFFFFF;
width: 600px;
}
| 
