SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    stuck in Crowley, Texas
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Utopia - 3 col float

    hi all,

    I just finished reading the HTML Utopia book and this is my first attempt at table-less page layout. I started with the 3 column float demo file and have 1 problem that I have yet to figure out - I have searched and read this forum for 2 days now - and I've learned and fixed a lot but this one eludes me - hoping someone can see what it is I am missing.

    I only have IE6 and FireFox 0.8 to check with. IE6 seems to do exactly what I intended. The problem appears when I view in FireFox - and then only when the center content is shorter than either of the outside DIVs - FF wants to cram the footer DIV right up against the longer of the outside DIVs. I just can't figure out what to tell FireFox to make it behave. I thought the margin:20px; would do it, but it isn't, so it has to be something else.

    This page looks pretty much the same in IE6 and FF.8 - http://www.mrtopia.com/index.shtml


    Best Regards,
    MikeR
    Last edited by miker; Mar 10, 2004 at 09:19.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Mozilla/firebird occasionally has problems with the top margin and the problem seems to be when an element above has no border.

    Adding a bottom-border to your wrapper seems to allow the margins to work.

    Make the bootom border white and you won't see it. (or you could specify transparent).

    Code:
    #wrapper {
      margin: 0 10px 0px 10px;border-bottom:1px solid #FFF;
      padding: 0;
    }
    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Mar 2004
    Location
    stuck in Crowley, Texas
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Adding a bottom-border to your wrapper seems to allow the margins to work.
    Thanks Paul - that worked like a champ!! Much more elegant than what I had just come up with - I kludged it into submission by adding an ugly   to the clear DIV.

    As I said earlier, I've been reading here for a couple of days and want to say you are one of the best - thanks again.

    Mike


Bookmarks

Posting Permissions

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