5 replies [Last post]
mikeyhill
mikeyhill's picture
Offline
newbie
NYC
Last seen: 4 years 32 weeks ago
NYC
Timezone: GMT-4
Joined: 2015-04-24
Posts: 3
Points: 4

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 20 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

When the width is reduced,

what do you expect it to do?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mikeyhill
mikeyhill's picture
Offline
newbie
NYC
Last seen: 4 years 32 weeks ago
NYC
Timezone: GMT-4
Joined: 2015-04-24
Posts: 3
Points: 4

HI Gary, I want it to

HI Gary,

I want it to maintain width.with making a new line below.

mikeyhill
mikeyhill's picture
Offline
newbie
NYC
Last seen: 4 years 32 weeks ago
NYC
Timezone: GMT-4
Joined: 2015-04-24
Posts: 3
Points: 4

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;

}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 20 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 7 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

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.