1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

footer alinement in css

Discussion in 'CSS' started by eddie, Mar 4, 2005.

  1. #1
    Hello
    I am trying to add footer to this css file that I want to appear just below the longest column.
    I am currently using a php include for the footer but it aligns with the center column and it runs into the right column if the center content is not long enough.

    body { background-color:whitesmoke ;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    color:navy;
    }

    a:hover { font-family:Verdana, Arial, Helvetica, sans-serif;
    color:navy;
    background-color: white}

    h1 { font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:38px}

    h2 { font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:32px}

    h3 { font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:26px}

    #leftcontent { position: absolute;
    left:10px;
    top:90px;
    width:120px;
    background:cyan;
    border:0px solid darkblue;
    }

    #centercontent { top:102px;
    bottom-900px;
    background:whitesmoke;
    margin-left:160px;
    margin-right:160px;
    border:3px solid darkblue;
    voice-family: "
    \"

    }


    \"
    "
    ;
    voice-family: inherit;
    margin-left:121px;
    margin-right:121px;
    }

    html>
    body #centercontent { margin-left:121px;
    margin-right:121px;

    }

    #rightcontent { position: absolute;
    right:10px;
    top:90px;
    width:125px;
    background:whitesmoke;
    border:0px solid darkblue;
    }

    #banner { background:dodgerblue;
    height:75px;
    border-top:0 solid darkblue;
    border-right:0 solid darkblue;
    border-left:0 solid darkblue;
    voice-family: "




    }
    ;
    voice-family: inherit;
    height:74px;
    }

    html>
    body #banner { height:74px;
    }

    p,h1,h2,h3 { margin:0px 10px 10px 10px;
    }






    Thanks
     
    eddie, Mar 4, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Eddie, post a test page - it will be easier to look at. Keep in mind that child selector syntax (i.e. E > F) is not supported in some browsers (last time I checked, IE didn't support this).

    You also use colors that are not valid in CSS (e.g. whitesmoke) and have some syntax errors (bottom-900px).

    J.D.
     
    J.D., Mar 4, 2005 IP
    fryman likes this.
  3. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #3
    I tell you this much, no one beats JD when it comes to CSS. THanks for all your help JD.
     
    NewComputer, Mar 4, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #4
    J.D., Mar 5, 2005 IP
  5. eddie

    eddie snowrider

    Messages:
    247
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    138
    #5
    ok here is the test page
    http://www.routers101.com/testcss/testcssindex.php


    Att is the original css before I played with it

    Thanks
     
    eddie, Mar 5, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Your right column is an absolutely-positioned div. Such elements do not participate in the normal document flow (e.g. your center div), which is why your footer behaves as if the right column doesn't exist. This is by design.

    I'm looking at your HTML and it seems to me that you don't have much experience with CSS (i.e. the test page is sprinkled with <font>, <center>, etc). If this is correct, you'll save yourself a lot of time if you use a CSS-formatted table to lay out the page.

    If you do want to continue with div's, you can try using floats (e.g. two left columns are left-floated and the ads are in a right-floated div) or a combination of floats (or absolutely-positioned div's) and normal div's (e.g. left-floated nav bar; lift-right-margined center div; right-floated ads div).

    J.D.
     
    J.D., Mar 6, 2005 IP