Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Placement

Bottom of Page

1 to 13 of 13

  1.  
    • CommentAuthor350designs
    • CommentTimeFeb 19th 2006
     permalink
    Imagine 2 frames, one on top of another. Bottom one is, lets say 150px high and never moves or changes it's height. Top one on the other hand, if browser window is expanded downwards, would show more content (change it's height). Now my question is: How do you make that only using CSS? Thanks a lot!
    • CommentAuthorKanashii
    • CommentTimeFeb 19th 2006
     permalink
    Not sure if this is what you want but heres one way:

    #topDiv {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 150px;
    overflow: auto;
    }

    #bottomDiv {
    position: fixed;
    bottom: 0;left: 0; right: 0;
    height: 150px;
    }

    top div will have a scroll bar if you dont want it change the overflow to hidden.
    • CommentAuthor350designs
    • CommentTimeFeb 19th 2006
     permalink
    Exactly what I had in mind! Thank you very much.
    • CommentAuthor350designs
    • CommentTimeFeb 19th 2006
     permalink
    P.S. Does IE not render position:fixed properly?
    • CommentAuthorKanashii
    • CommentTimeFeb 19th 2006
     permalink
    Oh, of course it wouldn't.... -rolls eyes- umm...I dunno.
  6.  permalink
    IE treats position: fixed as position: absolute.
    • CommentAuthor350designs
    • CommentTimeFeb 19th 2006
     permalink
    Is there some sort of work-around for this issue?
    • CommentAuthor350designs
    • CommentTimeFeb 19th 2006
     permalink
    hah, Nevermind,I'm stupid. Thanks for your help eveyone.
    • CommentAuthor350designs
    • CommentTimeFeb 20th 2006
     permalink
    Yeah, another question. This is my CSS:

    <style type="text/css">
    <!--
    body {
    margin:0;
    padding:0;
    text-align:center;
    }
    #topDiv {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:250px;
    overflow:hidden;
    background-color:#CC0000;
    width:100%;
    }

    #bottomDiv {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:250px;
    background-color:#FF9900;
    width:100%;
    }-->
    </style>

    How do I make the "topDiv" do the same thing it does in firefox (expand as the page gets longer. And how do I align a picture or a DIV vertically in it, so if you expand the page it would always be centered both vertically and horizontally.

    Thanks!
    • CommentAuthor350designs
    • CommentTimeFeb 20th 2006
     permalink
    Anyone?
  11.  permalink
    This is a great example of absolute positioning an object dead center:

    http://www.wpdfd.com/editorial/thebox/deadcentre4.html

    I've tried it with your current example briefly and it will center vertically but not horizontally. I think its due to the fact that you have the top div set as overflow auto, its just kinda floats up off the page.

    Sorry if this isn't very helpful but it should be a good starting point for you.

    regards,

    M.
    • CommentAuthor350designs
    • CommentTimeFeb 21st 2006 edited
     permalink
    To give you a better idea of what I'm talking about I have uploaded what I have so far. It seems to be working in Firefox but not IE.

    http://www.350designs.com/test
    http://www.350designs.com/test/company.html
    • CommentAuthor350designs
    • CommentTimeFeb 21st 2006
     permalink
    Does anyone know how to get this thing working in IE?

1 to 13 of 13

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page