SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2003
    Location
    brighton
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Footers - please be gentle!

    OK, I'm beginning to make the CSS journey and, so far, it's all making a lot of sense, but this one has got me stumped.

    I'm developing a 2 col layout (2 divs - left fixed 360px, right fluid) with a simple footer and header. My problem is getting the footer to stay at the bottom of the page WHEN the browser window is resized such that the left column length is longer than the right (see http://www.emailmerge.co.uk).

    I figured this was because with my use of absolute positioning for the left column (margin-left: 0, width 360px), so I devised a second page (http://www.emailmerge.co.uk/index2.html) where both divs (leftcol and rightcol) float left (and the footer has the property clear:left; ).

    I'm leaving leftcol at a fixed width (360px) and only defining padding (5px) for rightcol (to have it autostretch over the rest of the browser window). This results in the footer appearing (as it should) beneath left and right column content. However, resizing the browser window in IE5 for Macintosh will reproducibly cause it to crash. There seems to be now problem in Camino, Safari, IE6 (Win) Am I doing something very wrong?

    I'd appreciate any advice

    Peter

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Add "clear: both;" to your footer's declaration to keep it from moving up into the rest of your content.

  3. #3
    SitePoint Member
    Join Date
    May 2003
    Location
    brighton
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Vinnie, but "clear:both" (as I understand it) only works with floated content. In the first scenario, there is no floating of the divs and thus adding clear:both seems to have no effect........

    Peter

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pjosborne
    Thanks for the reply Vinnie, but "clear:both" (as I understand it) only works with floated content. In the first scenario, there is no floating of the divs and thus adding clear:both seems to have no effect........

    Peter
    You're right; it won't work with absolutely positioned elements, since they're removed from the "normal flow" of the document. I was offering a fix for your second example, sorry .

  5. #5
    SitePoint Member
    Join Date
    May 2003
    Location
    brighton
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    You're right; it won't work with absolutely positioned elements, since they're removed from the "normal flow" of the document. I was offering a fix for your second example, sorry .
    Thanks Vinnie, it does work with the second example - now if I could just figure out why IE for Mac crashes when I resize the window......

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pjosborne
    However, resizing the browser window in IE5 for Macintosh will reproducibly cause it to crash. There seems to be now problem in Camino, Safari, IE6 (Win) Am I doing something very wrong?
    A floated element needs a width set, either by setting the CSS width property or by the intrinsic width that exist in an element it contains (like an image). Maybe that's why your second example crashes. Your right column has no width.

    You could just leave the right column static and to keep the footer down use clear:both as sugested, like so:
    Code:
    #left {float:left; width:360px; background-color:#fee;}
    #main {margin-left:365px; background-color:#efe;}
    #footer {clear:both; background-color:#eef;}
    Is that what you're after?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


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
  •