Results 1 to 8 of 8

Thread: Footer div

  1. #1
    Join Date
    Jan 2004
    Location
    Mobile, AL
    Posts
    138

    Footer div

    I decided this old dog needed to learn some new tricks, so I just finished doing an entire layout with divs instead of tables. I'm surprised this is my first trip here about this, but I made it to the end and got within 99.X% of the same table layout.

    Anyhoo, I got down to the footer and am having a bit of an issue. I've got a header div, with a main div below that, it has a left and right div inside it. Now below that main div I'm trying to add the footer div.

    If I add margin-top to the footer CSS, I get the appropriate margin between the main div and the footer div in IE. In Firefox it is still flush with the bottom of the main div. If I add a br style="clear:both" tag between the 2 divs, I then get the appropriate margin in Firefox, but an additional line break in IE. A break tag with no style results in the same in IE, still flush in Firefox (with the clear:both added to the CSS).

    Any ideas?


    PHP Code:
    <div id="header"></div>
       <
    div id="bodywrap">
         <
    div id="leftcontent"></div>
         <
    div id="rightcontent"></div>
       </
    div>
    <
    div id="footer"></div>



    #bodywrap { width:750px; margin-top:7px }
    #footer { clear:both; width:750px; margin-top:7px; padding:3px 0px 3px 0px  } 
    Shawn Kerr

  2. #2
    First off, add &nbsp; to your divs so they aren't empty and try it with your css. DIVs aren't displayed the same in IE and FFox if they are empty.
    Dyslexics Have More Fnu

  3. #3
    Join Date
    Jan 2004
    Location
    Mobile, AL
    Posts
    138
    They're not empty, I just took out the irrelevant content inside them for posting.

    Guess I should've made mention of that.
    Shawn Kerr

  4. #4
    Use clear:left, clear:right or clear:all instead of clear:both. If you're going to clear lots of floats, use <div class="clear"></div> (with css: div.clear { clear: all; }) between divs where you want to clear floats.
    Dyslexics Have More Fnu

  5. #5
    Join Date
    Jan 2004
    Location
    Mobile, AL
    Posts
    138
    Anything other than clear:both, the whole layout gets messed up. It's like the footer takes over the entire layout. With clear:both it looks right, there's just not a margin. I hadn't tried the div idea, but it didn't work.

    Just tried with a table, with the same CSS, and it works perfect of course.

    The 2 things that should've been a pain in the *** for me, went quite easy. This seemingly simple thing is being a pain.
    Shawn Kerr

  6. #6
    Join Date
    Apr 2005
    Posts
    501
    Use clear:left, clear:right or clear:all
    There is no such thing as 'clear: all'.
    IE7 is nine years behind the standards or wrong.
    But it works in IE!
    "IE is a cancer on the web" -- Paul Thurott
    "Avoid hacker-bait apps like Internet Explorer" -- Kevin Mitnick

  7. #7
    Join Date
    Oct 2004
    Location
    San Francisco, CA
    Posts
    2,454
    Moved to Web Design and Content, probably better here.
    Tyler Cole
    Eeek, a Blog

  8. #8
    Join Date
    Jan 2004
    Location
    Mobile, AL
    Posts
    138
    Not a problem Tyler. I'm so used to going to the Programming forum I guess.

    There is no such thing as 'clear: all'.
    I didn't think there was, but sometimes I get surprised.

    It doesn't seem to be clearing the bodywrap div at all. I had to make a change in the rightcontent div and when it shortened up, the footer followed it right up the layout, instead of staying below like I would expect.

    That's either typical div behavior or a problem.

    I'm glad this is more of an experiment on whether I could actually do a tableless layout rather than relying it. I think I'll stick with what I know. Tables don't take [me] days to figure out and I don't have to hack them to work in multiple browsers, they just work.
    Shawn Kerr

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •