Footer issues

quartzy

11-13-2010, 01: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, 02: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, 03: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, 03: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, 03: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, 03:05 AM

*Gazes around*

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

quartzy

11-13-2010, 03: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, 03: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, 04: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, 04: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, 03:12 PM

Excavator

11-13-2010, 04: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, 05: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, 05: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, 07: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