4 replies [Last post]
pinehead
Offline
Regular
Last seen: 15 years 3 weeks ago
Joined: 2004-05-24
Posts: 36
Points: 0

I have my site created using div. When i have a colum on my main page and i put enough content in it to stratech the colum to a page with a scroll bar. Not everything stretches with it. Any ideas?

http://beta.htiqbd.com/here.html

Thank you for your time and help.

Anthony

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 25 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Colums

Hi pinehead

You've fallen foul of the dreaded footer problem. THe best way to help would be to provide this ALA article: http://www.alistapart.com/articles/footers/

The next sentence is true. The previous sentence is false. Discuss...

pinehead
Offline
Regular
Last seen: 15 years 3 weeks ago
Joined: 2004-05-24
Posts: 36
Points: 0

Colums

http://beta.htiqbd.com/v2.html

if you take a look at my code, i have a sidebar and a center. The center is where my content goes, i would like for my side bar to also extend to the footer, but the footer and side bar expand when the page has more content.

That article, really doesn't clarify where what goes..

Any suggestions? As to what shoudl be changed on the center footer and sidebar?

Thank you
Newb Anthony

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 4 years 1 day ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Colums

try this... I commented out some of the code using a z in front of it, and used some floats and clears.. it works fine in firefox and ie6

html, body {
margin: 0;
font-family: arial;
background: #fff
height: 100%;
}

div.titleheader {
zposition: absolute;
border-style: solid;
border-width: 0px 0px;
top: 0;
height: 80px;
width: 100%;
background: url(header.jpg);
}

div.header {
zposition: absolute;
border-style: solid;
border-width: 1px 0px;
border-color: #999;
background-color: #a6caf0;
padding: 5px;
top: 5em;
height: 30px;
width: 100%;
text-align: center;
}

div.sidebar {
zposition: relative;
text-align: center;
width: 150px;
top: 6.9em;
height: 40em;
left: 0;
border-right: 1px solid #999;
border-bottom: 0;
background-color: #a6caf0;
padding: 5px;
float:left;
clear:left;
}

div.center {
position: relative;
border: 2px solid #000000;
padding: 5px;
top: 5em;
width: 500px;
height: 100%;
left: 25em;
}

#elButton a {
color: #000000;
font-size:12px;
font-family:arial;
font-weight:bold;
text-decoration: none;
border:2px outset #68A3DA;
background-color: #68A3DA;
display: block;
width: 140px;
height: 20px;
padding: 2px 3px;
margin: 1px;

}
#elButton a:hover {
background-color: #36CCE2;
color:#ffffff;
padding-left:4px;
border:2px inset #36CCE2;
}

#addressbar {clear:left;
zposition: absolute;
width: 100%;
height: 30px;
ztop: 42em;
zbottom: 0;
border-top: 1px solid #999999;
padding: 5px;
text-align: center;
background: #a6caf0
}

address p {
font-size: 10px;
font-family: arial;
}

#computercolum {
zposition: absolute;
text-align: center;
zwidth: 300px;
ztop: 10em;
zheight: 25em;
left: 20em;
border: 1px dashed #999;
background-color: #ffffff;
padding: 5px;

}

pinehead
Offline
Regular
Last seen: 15 years 3 weeks ago
Joined: 2004-05-24
Posts: 36
Points: 0

Colums

Thank you for your help. If you go to my site. and change the size of the screen or resolution on your computer, it goes nuts. I am wanting it to expand to fit the screen.. Any good tutorials on this? i woulnd' have thought for it to be so tricky.

Thank you
Anthony

p.s my site is http://beta.htiqbd.com