Help with css positioning and footers

Dev Shed Forums Sponsor:

March 25th, 2003, 01:36 PM

bmacfarland

Junior Member

Join Date: Mar 2003

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

Help with css positioning and footers

I have a two column layout (a navigation element and a content area), that requires a footer at the bottom of the longer column. The content column can sometimes be shorter be than navigation and vice versa depending on the page (it's data driven).

I've read at places like A List Apart (URL) that this is fairly impossible without using float left and float right (which I don't have much experience using). I hope to not use some sort of javascript hack that is there.

I really only require it to work in current Gecko-based or IE browsers. Opera would be a nice bonus.

Comments on this post

arionic agrees!

March 25th, 2003, 01:48 PM

jharnois

mod_dev_shed

Dev Shed God 20th Plane (14500 - 14999 posts)

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,817

Time spent in forums: 1 Month 1 Week 4 Days 7 h 14 m 56 sec
Reputation Power: 1098

See if this is what you're going for (copy, paste, view).

Code:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Can I put my BAR in your FOO?</title>
</head>

<body>
<div style="float:left">Navigation</div>
<div style="float:left">This<br />That<br />The<br />Other</div>
<div style="clear:both;float:left">Nav Foot</div>
</body>

</html>

March 25th, 2003, 03:13 PM

bmacfarland

Junior Member

Join Date: Mar 2003

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

I was trying to do it without floats as I have about 3-4 days of work into going with relative and absolute positioning andn a float left really distorts everything that's inside of the columns (yeah, I have divs nested in divs, nested in more and more divs). Is there a way to get absolute and relative positioning to work inside those divs (it seems like the float:left, is being inherited in child divs)?

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Can I put my BAR in your FOO?</title>
</head>

<body style="background-color:blue;">
<div style="background-color:white">
<div style="float:left">Navigation</div>
<div style="float:left">This<br />That<br />The<br />Other</div>
<div style="clear:both;float:left">Nav Foot</div>
</div>
</body>

</html>

March 25th, 2003, 03:25 PM

jharnois

mod_dev_shed

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,817

Time spent in forums: 1 Month 1 Week 4 Days 7 h 14 m 56 sec
Reputation Power: 1098

Well you didn't mention that you didn't want to use float, only that you didn't want to hack it with JavaScript -- oh well.

You should be able to do it in your situation without floats by closing your main containing div before you add the footer one. divs stack on top of each other by default (when not told to do anything else).

Code:

<div>Foo</div><div>Bar</div>

// results in

Foo
Bar

So if you put all of your nested divs inside the div containing Foo above, and position them all like you already have, adding another div after that that contains the Nav Footer should put it at the bottom.

Code:

<div>
<!-- this div's height equals the height of Nav or Content, whichever is higher -->
  <div>Nav</div>
  <div>Content</div>
</div>
<div>NavFooter</div>

March 25th, 2003, 04:12 PM

bmacfarland

Junior Member

Join Date: Mar 2003

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

That last snippet didn't seem to put the nav and content into columns, they were layered on top of each other. When I do try to put in columns, this is what I'm getting.

<html>
<head>
<title>Can I put my BAR in your FOO?</title>
</head>
<body style="background-color:blue;">

<div style="background-color:red">header</div>
<div style="background-color:yellow">
<div style="position:absolute;width:16%;">
Nav<br> this<br> is<br> very<br> big<br>
</div>
<div style="position:relative;top:0;left:16%;width:83%;">
Content<br>is<br>small<br> 
</div>
</div>
<div>NavFooter</div>
</body>
</html>

At this point is seems to put the footer at the end of the content area which isn't what want unless the content area is bigger than the navigation. I know I could tie it to the height of the navigation, but then it would break if lots of content were to be sent. Perhaps I'm making it more complicated than it should be?

Last edited by bmacfarland : March 25th, 2003 at 04:14 PM.

March 25th, 2003, 04:32 PM

jharnois

mod_dev_shed

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,817

Time spent in forums: 1 Month 1 Week 4 Days 7 h 14 m 56 sec
Reputation Power: 1098

My last code example was meant to show you where to place the Nav Footer in relation to the parent <div>s through your site. It wasn't mean to be a paste and work thing.

I know you said you'd prefer not to float, but to get two divs to be next to each other when you don't know the height of the first one, it's the only way I know.

Code:

<html>
<head>
<title>Can I put my BAR in your FOO?</title>
</head>
<body style="background-color:blue;">
<div style="background-color:red">header</div>
<div style="background-color:yellow;width:100%;">
  <div style="float:left;width:16%;">Nav<br> this<br> is<br> very<br> big<br></div>
  <div style="float:left;width:83%;">Content<br>is<br>small<br> <!-- or<br>is<br>it?<br> --></div>
</div>
<div style="clear:both">NavFooter</div>
</body>
</html>

Honestly, it's easier than dealing with "position" all the time and trying to get all of that to work.

March 25th, 2003, 05:37 PM

bmacfarland

Junior Member

Join Date: Mar 2003

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

That's actually great in IE, but...

... the colors don't show up the same in Mozilla. I think I found a workaround of adding "float:left" to the yellow div there. I'm going to give this some work and see how it goes. If it doesn't, at least I'll learn a bit more about float.

Help with css positioning and footers

Developer Shed Advertisers and Affiliates