SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 column layout, footer drifts right

    Am trying to design with 3 columns, but footer slides to the right of the sidebar column. Please help me.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <!-- saved from url=(0051)http://www.wpdfd.com/editorial/basics/mypage11.html -->
    <HTML><HEAD>
    <TITLE>Untitled Page</TITLE>
    <META http-equiv=content-type content=text/html;charset=iso-8859-1>
    <STYLE type=text/css media=screen>
    #header {
    VISIBILITY: visible; POSITION: relative; HEIGHT: 68px; BACKGROUND-COLOR: #D1CAC4; TEXT-ALIGN: center
    }
    BODY {
    FONT-SIZE: small; MARGIN: 0px; LINE-HEIGHT: 180%; FONT-FAMILY: "Times New Roman", Times, serif; BACKGROUND-COLOR: #CFC4BE}
    #navbar {
    FONT-SIZE: 9px; MARGIN-BOTTOM: 15px; COLOR: white; LINE-HEIGHT: 16px; LETTER-SPACING: 6px; HEIGHT: 16px; BACKGROUND-COLOR: #756351; TEXT-ALIGN: center
    }
    #logo {
    MARGIN: 0px 10px 10px 18%; HEIGHT: 95px
    }
    #midsection {
    BACKGROUND: none transparent scroll repeat 0% 0%; MARGIN: 10; COLOR: #6b6c5a
    }
    #footer {
    FONT-SIZE: 9px; COLOR: white; LINE-HEIGHT: 16px; LETTER-SPACING: 6px; HEIGHT: 16px; BACKGROUND-COLOR: #756351; TEXT-ALIGN: center
    }
    A {
    COLOR: white; TEXT-DECORATION: none
    }
    A:hover {
    COLOR: #fc0; TEXT-DECORATION: none
    }
    div#leftcol {
    margin: 5px;
    padding: 5px;
    float: left;
    position: relative;
    }
    div#rightcol {
    margin: 5px;
    padding: 5px;
    float: left;
    position: relative;
    width: 350px;
    }
    </STYLE>

    <META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD>
    <BODY>
    <DIV id=header><img src="landsendpage_files/assets/img/yorkcoastline.jpg" width="807" height="65"></DIV>
    <DIV id=navbar><A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">HOME</A> | <A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">HISTORY</A> | <A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">NEWS</A> | <A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">GOVERNMENT</A> |<A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#"> CONTACT</A> |
    <A href="http://www.wpdfd.com/editorial/basics/mypage11.html#"> PROFILE</A>
    </DIV>

    <DIV id=midsection>
    <div id=leftcol>This is the left column.</div>
    <div id=rightcol>Tansi, Hello. <br>
    Welcome to the York Factory First Nation site. <br>
    We are Ininew (Cree) from the Hudson Bay Lowlands, a land we have called Ininew Aski for thousands of years. Pih-tik-way. Enjoy your visit. </div>
    <div id=sidebar>This is the right sidebar.
    </div></DIV>
    <DIV id=footer><A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">HOME</A> | <A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">HISTORY</A> | <A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">SITE MAP</A> | <A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">VISITORS</A> |<A
    href="http://www.wpdfd.com/editorial/basics/mypage11.html#">
    CONTACT</A></DIV></BODY></HTML>

  2. #2
    SitePoint Member ComputerLady's Avatar
    Join Date
    Nov 2004
    Location
    Sandusky Ohio
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add clear into CSS for footer

    You haven't added the CLEAR statement for your footer DIV. Try adding this into that:

    #footer {
    clear: both;
    }
    Irene M. Kraus a.k.a. The Computer Lady!
    Design Works Internet - CEBUG Home
    Bringing design ideas to life!


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
  •