#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    4
    Rep 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 (http://www.alistapart.com/stories/fl...youts/discuss/) 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
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    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>
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    4
    Rep 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>
  6. #4
  7. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    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>
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    4
    Rep 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> <!-- or<br>is<br>it?<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.
  10. #6
  11. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    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.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    4
    Rep 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.

IMN logo majestic logo threadwatch logo seochat tools logo