Today's Picture:
For the last one year, I have been facing the problem of sticky footer at a sub-domain website of mine. To avoid the embarrassing situation of footer appearing in the middle of the page, I had to remove the footer and allow all the three dynamic columns (left, middle, right), which do not have fixed height.
I use the following layout:
Top one division with 100% width.
Next:
left div with width of approx.20%.
middle div starts at 21% with width of 59%.
right div starts at 81% with width of 18%.
All the columns have borders.
All the columns get their data from php/html files. Hence, their height varies. Giving a fixed height, and overflow-scroll, I used for sometime. But, somehow, it did not satisfy me.
Visiting numerous websites containing css support threads educated me, but could not solve my problem because of the burden of three dynamic divs.
Finally, today, I could solve the problem by using a very simple technique. For the benefit of my readers, I present it below.
Last column, last division in my above layout, usually gets the highest height. It starts at 81% margin-left, with 18% width, 1% border, ends at 100%.
Here I added the following style:
<div style='position:relative; overflow:auto; ' > Content.
</div>.
Now, the footer div:
<div style='width:100%; float:left; height:60px; background:#aaaaff;'>
content.
</div.>
All the divisions, have their position:absolute. Exception is the last and lengthiest right division.
You can also see this demo at alternate site: ayyo.x10.mx.
If the above technique does not work, probable reasons
Pl. check up all the previous divisions, whether they have proper closing tags and some other errors, which may be affecting their position, and float.
For the last one year, I have been facing the problem of sticky footer at a sub-domain website of mine. To avoid the embarrassing situation of footer appearing in the middle of the page, I had to remove the footer and allow all the three dynamic columns (left, middle, right), which do not have fixed height.
I use the following layout:
Top one division with 100% width.
Next:
left div with width of approx.20%.
middle div starts at 21% with width of 59%.
right div starts at 81% with width of 18%.
All the columns have borders.
All the columns get their data from php/html files. Hence, their height varies. Giving a fixed height, and overflow-scroll, I used for sometime. But, somehow, it did not satisfy me.
Visiting numerous websites containing css support threads educated me, but could not solve my problem because of the burden of three dynamic divs.
Finally, today, I could solve the problem by using a very simple technique. For the benefit of my readers, I present it below.
Last column, last division in my above layout, usually gets the highest height. It starts at 81% margin-left, with 18% width, 1% border, ends at 100%.
Here I added the following style:
<div style='position:relative; overflow:auto; ' > Content.
</div>.
Now, the footer div:
<div style='width:100%; float:left; height:60px; background:#aaaaff;'>
content.
</div.>
All the divisions, have their position:absolute. Exception is the last and lengthiest right division.
You can also see this demo at alternate site: ayyo.x10.mx.
If the above technique does not work, probable reasons
Pl. check up all the previous divisions, whether they have proper closing tags and some other errors, which may be affecting their position, and float.
No comments:
Post a Comment