6 replies [Last post]
8900200
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2005-04-25
Posts: 11
Points: 0

Hi - Yes, I am newbie to laying out content in CSS. So far I love it! I do have a question though. Have a couple of columns (using floats to get them site by side) that are working great. My challenge is that I need a Footer div to appear below both of the cols. Of course if these aren't floats I can't get seem to get them side by side. Right now the footer sits underneath both colums. How can I tell the footer dive to diaply only below both columns?

Thanks

Rich

<body >
<div id="header">
<div id="pagetitle">Title </div>
<div id="nav">Nav </div>
</div>
<div id="bodyarea">
<div id="left">text</div>
<div id="right">text</div>
</div>
<div id="footer"></div>
</body>

#header {position: relative; margin: 0 auto; height: 181px; width: 773px; background: #FFF url(images/header.jpg) no-repeat; color: #666; text-align:right}
#pagetitle {position:absolute; width:445px; height:30px; z-index:1; left: 250px; top: 42px; text-align:left;}
#nav {text-align:left; position: absolute; bottom: 89px; right: 60px; z-index: 3; top: 93px; left: 240px; margin: 0; padding: 0; list-style: none; width: 530px; height: 32px;}
#bodyarea {position: relative; width: 773px; margin: 0 auto; padding: 0;}
#left {float:left; width:200px; padding: 3px 0px 3px 11px; text-align: left; }
#right {float:right; width:550px; padding: 3px 11px 3px 0px; text-align: left;}
#footer {position: relative; margin: 0 auto; height: 135px; width: 773px; background: #FFF url(images/footer.jpg) no-repeat;}

littlemanchan
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2005-04-20
Posts: 21
Points: 0

2 col with footer?

i'd add

overflow:auto;

to your #bodyarea

8900200
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2005-04-25
Posts: 11
Points: 0

overflow

Thanks - Didn't really help. Good to know about that property though. Update: the code I posted before actually did what I hope in IE, but not in NS or FF.

Rich

littlemanchan
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2005-04-20
Posts: 21
Points: 0

2 col with footer?

hmm wait i think i misunderstood.

Quote:
My challenge is that I need a Footer div to appear below both of the cols.

Right now the footer sits underneath both colums. How can I tell the footer dive to diaply only below both columns?

now that i read it, i can't seem to see what you're trying to do.

8900200
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2005-04-25
Posts: 11
Points: 0

footer to appear below bodyarea

Hi - I am simpley tryng to have to cols appear side by side. Then have content appear further down on the page rather than appearing behind these cols.

littlemanchan
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2005-04-20
Posts: 21
Points: 0

Re: footer to appear below bodyarea

8900200 wrote:
Hi - I am simpley tryng to have to cols appear side by side. Then have content appear further down on the page rather than appearing behind these cols.

right, so the footer goes below. that's what the overflow: auto, or overflow:hidden; does.

for example, copy and paste this into an html file and run it in firefox. (i added some borders to make it clearer)

<style>
#header {position: relative; margin: 0 auto; height: 181px; width: 773px; background: #FFF url(images/header.jpg) no-repeat; color: #666; text-align:right; border: 1px solid black;}
#pagetitle {position:absolute; width:445px; height:30px; z-index:1; left: 250px; top: 42px; text-align:left; border: 1px solid black;}
#nav {text-align:left; position: absolute; bottom: 89px; right: 60px; z-index: 3; top: 93px; left: 240px; margin: 0; padding: 0; list-style: none; width: 530px; height: 32px; border: 1px solid black;}
#bodyarea {position: relative; width: 773px; margin: 0 auto; padding: 0; overflow:auto; border: 1px solid black;}
#left {float:left; width:200px; padding: 3px 0px 3px 11px; text-align: left;}
#right {float:right; width:550px; padding: 3px 11px 3px 0px; text-align: left;}
#footer {position: relative; margin: 0 auto; height: 135px; width: 773px; background: #FFF url(images/footer.jpg) no-repeat;border: 1px solid black;}
</style>

<body >
<div id="header">
<div id="pagetitle">Title </div>
<div id="nav">Nav </div>
</div>
<div id="bodyarea">
<div id="left">text</div>
<div id="right">text<br> is there more?</div>
</div>
<div id="footer">this is my footer</div>
</body>

then take away the overflow property and see results. hope this helps.

8900200
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2005-04-25
Posts: 11
Points: 0

You rock!

Thanks a bunch. That's what I needed. I had tried applying the overflow to the footer and the left and right, but not in the larger container. Awesome!

Cheers
Rich