...

View Full Version : Footer issues



quartzy
11-13-2010, 02:41 AM
I have been working on the footer for my webpage and no matter what I do it will not sit right.
<div class="text"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p></div></div>


<div id="footer"><p>Copyright 2010</p></div>
</div></div>
</div>
</body>
</html>

I want the footer to just sit underneath the 'text' box.

Css
.textbox {
background: #33CC33;
border-left: 1px solid #DF8FA9;
border-right: 1px solid #DF8FA9;
color: #000000;
margin-left: 8px;
padding-left: 20px;
padding-right: 10px;
padding-top: 20px;
width: 90%;
padding-bottom: 10px;
}
.text {background: #fff;
width: 80%;
padding: 5%;
margin: 5%;
}

#footer
{
height:40px;
background:#ccc;
bottom:0;
left:0;
width:90%;
text-align: right;
font-weight: bold;
}

the webpages are puddypaws.co.uk/test,html and style.css. Please do not say they are not semantic I know that I am just trying to get the pages done. Also I am now working with percentages and would appreciate a resource if anyone knows a good one, I need to get the others away from pixels and into p[ercentages.

Chris Hick
11-13-2010, 03:21 AM
Have you tried putting them into separate paragraph tags rather than one? From the appearance, it seems you have improper tag order. If your paragraph tags starts on the inside of a div, it needs to end inside a div.

teedoff
11-13-2010, 04:01 AM
It looks like your div structuring is not right. Well I'm not sure if your structure is right. We're you intending to close container so early?

<body>
<div id="container">
<div id="header">
<div id="navigation">Content for id "navigation" Goes Here</div>
</div>
<div id="mainContent"> </div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>

Chris Hick
11-13-2010, 04:01 AM
Thank you for coming behind me, Teed and picking up what I cannot see while I'm at work. ;)

teedoff
11-13-2010, 04:04 AM
Thank you for coming behind me, Teed and picking up what I cannot see while I'm at work. ;)

haha you supposed to be on the net while working??....lol

Chris Hick
11-13-2010, 04:05 AM
*Gazes around*

Umm lets say.. yeah ^_^ but no I'm not hehe

quartzy
11-13-2010, 04:57 AM
Could not understand why chris posted his first post. But see that maybe I have my divs in misorder.

quartzy
11-13-2010, 04:59 AM
Yes, that got it in order, though now I have no background color, still too late now to change off to bed.

Excavator
11-13-2010, 05:14 AM
You have no background color because you have not cleared your floats.... but why are you floating those elements??? A full width element should not be floated, we float thing to put other things beside them and a full width element has no room beside it.

You can almost always clear floats like this:
#container {
/*height: auto;*/
background: #f00;
text-align: left;
margin: 0 auto;
padding: 0;
width: 65%;
position: relative;
overflow: auto;
}

Read a bit how overflow: auto; clears floats (http://www.quirksmode.org/css/clearing.html).

Still, no reason to float those elements.

teedoff
11-13-2010, 05:21 AM
He originally had his container div closed to early. I think thats why he had a float on it. Now that he's wrapped everything else in the container div, he needs to rework some of his style rules.

quartzy
11-13-2010, 04:12 PM
I read the link you gave but did not understand it.
When I applied the overflow:auto; my webpage had a side scroll bar and another scroll bar and that is not want I want to do. If I change it to overflow: hidden, the footer is not shown at all.

Excavator
11-13-2010, 05:41 PM
I read the link you gave but did not understand it.
When I applied the overflow:auto; my webpage had a side scroll bar and another scroll bar and that is not want I want to do. If I change it to overflow: hidden, the footer is not shown at all.

Most times, when you get an unwanted scrollbar from trying to clear floats with overflow: auto;, your box model (http://www.w3.org/TR/CSS2/box.html) is off somewhere.
Did you post a link to the test site? I looked but didn't see it.

quartzy
11-13-2010, 06:03 PM
I added some clear div's after the floated items. And still my footer is not sitting right. And I also made sure that my divs were in the right places. thanks for your help
I posted the link:

puddypaws.co.uk/test.html

The box model I am worried about as I am trying to keep everything in percentages and do not know how the box model would work with that.

Excavator
11-13-2010, 06:58 PM
You seem to want #footer to line up with .textbox inside of #right?
You have #right at 99.9% width (not sure the .9 works across browsers) and floated, then you margin .textbox over a bit.
#footer is not margined over to line up with .textbox.

Try like this instead:
#right {/*float:left;*/ width:99.9%;}
#footer {
height:40px;
width:90%;
margin: 0 0 0 8px;
background:#CCC;
text-align: right;
font-weight: bold;
overflow: hidden;
}

quartzy
11-13-2010, 08:10 PM
That did not work, so I moved a div ending and changed the right to 95% then changed the padding on the textbox and it works. Who knows why! just relieved



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum