Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post

    3 Column, Fluid, fixed, oyoyoy

    Here's what I am trying to do.

    The page should be set up like so
    ______________
    |___header____|
    | | | |
    | | | |
    |___|____|____|

    I want the header and the right column to be fixed, but I want the left and the middle to scroll

    Any thoughts on how to do this? I've tried it in CSS and in tables neither is working like I would want it to.
    No trees were harmed in the transmission of this message.
    However, a rather large number of electrons were temporarily
    inconvenienced.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>Fixed Header and Right Column</title>
    <
    style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    htmlbody {
    height:100%;
    font-size:0.9em;
    font-family:VerdanaArialHelveticasans-serif;
    }
    #container {
    height:100%;
    min-width:780px;
    }
    #header {
    position:fixed;
    height:8em;
    border-bottom:1px solid #000;
    background:#F00;
    top:0;
    left:0;
    width:100%;
    z-index:1;
    }
    #right {
    position:fixed;
    height:100%;
    background:#00F;
    width:200px;
    border-left:1px solid #000;
    right:0;
    top:0;
    z-index:0;
    }
    #rightcontent, #main {
    padding-top:8.25em/*this needs to be equal or greater than the height of #header*/
    }
    #main {
    padding-right:201px/*this needs to be equal or greater than the width of #right*/
    }
    #left {
    width:200px;
    float:left;
    }
    #content {
    margin-left:200px/*this needs to be equal to or greater than the width of #left*/
    }
    #content p {
    padding:10px;
    text-align:justify;
    }
    </
    style>
    <!--[if 
    lte IE 6]>
    <
    style type="text/css">
    html {
    overflow-x:auto
    overflow-y:hidden;
    }
    body {
    overflow-y:auto;
    /*the below is to fake min-width in IE6 and below. Change 780 to match the min-width in #container*/
    width:expressiondocumentElement.clientWidth 780 ? (documentElement.clientWidth == ? (body.clientWidth 780 "780px" "auto") : "780px") : "auto" );
    }
    #header, #right { /*anything position:absolute or position:relative; will now become position:fixed in IE6*/
    position:absolute;
    }
    #left {
    margin-right:-3px;
    }
    #content {
    margin-left:0;
    height:1%;
    }
    #header {
    width:expression(parseFloat(document.body.clientWidth)+'px');
    }
    #right { /*101 is the width of the #right column, be sure to adjust this accordingly*/
    left:expression(parseFloat(document.body.clientWidth 201) + 'px');
    }
    </
    style>
    <![endif]-->
    </
    head>
    <
    body>
    <
    div id="container">
        <
    div id="header">This is the header</div>
        <
    div id="right">
            <
    div id="rightcontent">This is the right column</div>
        </
    div>
        <
    div id="main">
            <
    div id="left">This is the left column</div>
            <
    div id="content">
                <
    pLorem ipsum dolor sit ametconsectetuer adipiscing elitDonec semper orci et justoQuisque iaculis tempor duiSed sed lacusDonec aliquamAenean eu mi laoreet libero hendrerit facilisisDonec blanditnisi at feugiat facilisisarcu tortor porta nullaquis tincidunt diam ipsum ac risusVestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia CuraeSed non metus nec sem elementum auctorSed posuerediam ac vehicula conguelibero massa rhoncus diamsed eleifend enim risus non miIn hac habitasse platea dictumstMauris tristique nibh sit amet diamInteger ac leoFusce id ante quis lectus cursus cursusCras lacus nullamalesuada acpretium insollicitudin innunc. </p>
                <
    pCurabitur eget dolorDuis condimentum orci sed turpisVivamus dictum mattis loremCras sit amet semAliquam erat volutpatSuspendisse interdumleo sed posuere gravidajusto justo faucibus orciid suscipit nunc augue at maurisPraesent eu massa at orci vulputate variusNam pellentesque feugiat liberoMauris tortor tortorauctor vitaeeuismod idcursus utodioDonec fermentum vehicula maurisMaecenas vulputate ligula in lorem. </p>
                <
    pDuis euismodSed euismod enim euismod leoIn aliquetMorbi erat odioauctor etpellentesque aaliquet quisenimNulla lobortis odio ac diamIn vestibulum erat ac elitSed at diamDonec tempusurna ac pretium pellentesqueneque nunc varius puruseu posuere purus leo ac lectusPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestasProin aliquam tellus id felisVivamus odioNulla tellusProin euismod blandit nullaInteger ultricesrisus varius hendrerit laoreetturpis diam sodales tellusa ultricies sapien augue sed nuncAliquam eu anteDonec cursus pede id erosUt pulvinar diam quis anteNullam iaculisleo id consectetuer condimentumest dui aliquam nislnec ultrices enim diam eget nislAliquam porta. </p>
                <
    pDonec lobortis euismod maurisInteger velit pedeimperdiet infeugiat eutincidunt gravidaanteMorbi odioIn hac habitasse platea dictumstMauris feugiatSed malesuada leoIn massa orciporttitor egetcongue quisauctor quismagnaCurabitur viverra nulla vitae enimProin elementum pulvinar justoVestibulum a purusAliquam erat volutpatVivamus sed purus sit amet lorem venenatis rutrumEtiam ut nisiUt sit amet odioPraesent rutrum hendrerit lectusUt temporIn ligulaProin a metus. </p>
                <
    pSed at felisAenean nonummy malesuada metusPhasellus cursus hendrerit turpisPellentesque rutrum sapien sed enimMauris miCras temporleo a convallis ultricieslorem purus lobortis diameu tristique mauris sem ac massaMorbi tempor libero quis orciEtiam pellentesquepurus vitae congue cursuslacus nulla malesuada nibhut rhoncus erat nibh id justoNulla faucibusPhasellus a diamAliquam egestaselit at feugiat volutpatlectus velit imperdiet magnaaccumsan dictum eros quam scelerisque miEtiam vulputateNullam vel leoDuis pulvinar congue urnaCurabitur mattisSuspendisse potenti. </p>
                <
    pAliquam erat volutpatSed nisiMorbi ultrices massa non elitInteger mattisIn ligulaSed congue fringilla tellusAliquam justoEtiam dignissim consectetuer elitVivamus vestibulumlectus non pharetra aliquetodio ante facilisis magnanec porta eros lorem id urnaNunc placerat arcu nonummy nibhNunc egestas dignissim loremIn consequatdui ac suscipit cursusurna elit tincidunt tellusid malesuada metus lorem vestibulum nullaNam tempus eros id ipsumUt imperdietPhasellus aliquetQuisque sapien quamvehicula velullamcorper sedporttitor inaugueNunc ornarelacus eget consectetuer accumsanipsum dolor volutpat tellusa malesuada dui nulla vitae justoAliquam ante. </p>
                <
    pDonec eleifend risus id risusAenean aliquet est tristique quamPraesent eget magna a risus faucibus mollisNulla commodo sem nec elitPhasellus blandit pharetra lacusCum sociis natoque penatibus et magnis dis parturient montesnascetur ridiculus musDuis odio velitsagittis atincidunt nonpulvinar quistortorVivamus ut arcu id sapien suscipit pulvinarNulla nec velitCurabitur mi quamvulputate fermentumporta interdumsagittis atestMorbi accumsan estCras interdumQuisque varius lacus non nuncVestibulum at arcu in dolor lacinia malesuadaAenean vulputate massa sit amet quamCurabitur tempor nisl eu metus. </p>
                <
    pNunc ac magnaSed aliquetNullam eleifend eleifend liberoCras arcuInteger sollicitudin dolor bibendum justoEtiam congueSuspendisse nequeVivamus eu nuncProin tellus magnacommodo inconsectetuer etblandit etliberoNulla temporCras loremPellentesque posuereSuspendisse non lorem et orci condimentum cursus. </p>
                <
    pMauris pulvinarpurus eget tempus scelerisquequam odio mattis ligulain pulvinar neque felis nec nullaEtiam feugiatCras in ante in arcu eleifend pharetraVestibulum id nibhSed molestie pretium magnaPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestasSuspendisse potentiVestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia CuraeVestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia CuraePraesent aliquet ipsum vitae maurisUt ac leo et ligula semper tristiqueVivamus sit amet massaPhasellus sodalesCras sagittissem at consectetuer lobortisest orci molestie diamfermentum tincidunt elit lectus at purusDuis eu felisMaecenas non turpis a nibh condimentum laciniaMaecenas eget nislSed bibendum sagittis duiDonec et magna id quam iaculis fringillaSuspendisse ipsum massaimperdiet aliqueteuismod necultricies velnisl. </p>
                <
    pAenean loremNunc pede felistempor sedvarius eudapibus inliberoDonec dui orciinterdum euullamcorper egetdapibus vitaesemPhasellus at magna a tellus consectetuer tinciduntSed vitae nisl nec nisi facilisis tinciduntNullam orci turpisluctus utmalesuada egetelementum inantePhasellus erat lectustincidunt consectetueradipiscing uthendrerit acurnaNullam adipiscing nisl et nequeNunc aliquet tellus id nullaCras eu dolorPellentesque tempus posuere duiNunc ac diamQuisque pellentesque nisi non metusSed fringilla metusIn hac habitasse platea dictumstMorbi vestibulum. </p>
            </
    div>
        </
    div>
    </
    div>
    </
    body>
    </
    html
    Last edited by _Aerospace_Eng_; 05-19-2007 at 10:55 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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