By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

position

P: n/a
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;
}
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
"HolyCow" <no****@nowhere.com> wrote in
news:40********@news1.prserv.net:
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:


[snip stylesheet]

The problem is that you're specifying the dimensions of all your page
elements in absolute units (pixels). This means that your layout won't
adjust properly to different window sizes (it will force horizontal
scrolling) as well as font-size changes. You need to specify your
dimensions in relative units (percentages or ems) and then things should
adjust properly.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.