Left and right floats going over the footer

Discussion in 'CSS' started by bencallis, Oct 29, 2008.

0
  1. #1
    I am new to css and have come across a problem..

    When the right or left menu increase in size they go over the footer. The left menu is an expandable navigation bar and the left is home to favourites which can increase in size.

    This is for the two menus.
    The footer is currently included at the bottom of the page although no css is added to it. I have looked for some suggestions on forums but many conflicted with the current menus.
     
    bencallis, Oct 29, 2008 IP
  2. bencallis

    bencallis Peon

    Messages:
    370
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Anyone here is what it looks like currently

    [​IMG]

    I have added

    #footer {
    clear:both;
    position:relative;}

    But still no joy :(
     
    bencallis, Oct 30, 2008 IP
  3. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Try putting the left, middle and right items in one div. Then have the footer in a different div.

    That should make it return to the bottom.
     
    LeetPCUser, Oct 30, 2008 IP
  4. rw_essen

    rw_essen Active Member

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #4
    Try to add an absolute position for footer. And try to add the same style to both sidebars.

    I don't know if will work, because i don't have the code in my front.
     
    rw_essen, Oct 30, 2008 IP
  5. witsols

    witsols Peon

    Messages:
    102
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    To prevent this from happening make sure you create spacing between columns. The CSS for achieving this layout you can simply set the desired width of each column and then float the containers left and right as shown below:

    #content {
    width: 600px;
    float: right;
    }

    #menu {
    width: 180px;
    float: left;
    }

    If you add the width’s of the each container 600 + 180 = 780px. Our wrapper is 800px so we kept 20px free incase of a buggy browser. After these two containers we have the footer. This is where we need to use the clear as show below:

    #footer {
    clear: both;
    }

    regard,
    zubair
     
    witsols, Nov 1, 2008 IP