Fri, 2015-04-24 19:22
I am building my 1st site with CSS and I have become unstuck with the footer.
How do I stop it from forming new lines as it shrinks down.
I have stuck it to the bottom of the page but when i shrink left it bunches up in a vertical fashion?
Fri, 2015-04-24 20:20
#1
When the width is reduced,
what do you expect it to do?
cheers,
gary
Fri, 2015-04-24 22:33
#2
HI Gary, I want it to
HI Gary,
I want it to maintain width.with making a new line below.
Sat, 2015-04-25 00:56
#3
this is what I have for my footer
#footer{
background-color:#DFDFDE;ß
color:black;
clear:both;
text-align:left;
padding:5px;
clear:both;
position:absolute;
bottom: 0;
width:100%;
bottom: 0px;
}
Sat, 2015-04-25 18:25
#4
Markup?
From the little we can see, the results seem appropriate. But without seeing the footer's content and how it's marked up and styled, it's not possible to suggest a specific solution.
Minimal test case:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.25 sans-serif; margin: 0; padding: 10px; } p { font-size: 1em; } h1 { font-family: serif; text-align: center; } #page { border: 1px solid black; height: 500px; /*for the sake of the demo*/ position: relative; } #footer { background-color:#dfdfde; color:black; /*clear:both;*/ /*this item is not in the flow*/ /*text-align:left;*/ /*redundant to the default*/ bottom: 0; padding:5px; /*Causes the total width to exceed the container's by 10px.*/ position:absolute; width:100%; /*uncomment the following to kill the wrapping*/ /*white-space: nowrap;*/ } #footer ul { padding: .5em; } #footer li { display: inline-block; margin: 0 1.25em; } /*]]>*/ </style> </head> <body> <div id="page"> <h1>Minimal test case</h1> <div id="footer"> <ul> <li>footer item</li> <li>footer item</li> <li>footer item</li> <li>footer item</li> <li>footer item</li> <li>footer item</li> <li>footer item</li> </ul> <p>Another line</p> </div> </div> </body> </html>
Drag the browser's width and watch the effect. Compare to the non-wrapping version.
cheers,
gary
Tue, 2015-05-12 14:51
#5
Footer torment
Hi,the footer torment is the content div closed and container are used into this footer div separate user class to an footer kindly check it out.