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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Trying the CSS approach to positioning--couple questions...

    Ok,

    I think I'm starting to understand the benefits of CSS for positioning. However, there are a couple things I'm having trouble grasping.

    1 - How can I force one DIV to be "footer"?
    2 - I made one DIV 145px wide. How can I make the one next to it take up the rest of the space? Meaning in the top DIV, I set the width to 100%. The width of the DIV in question should be 100% - 145px - 10px(for padding).

    I posted what I have so far. The colors are pretty strange right now. They're just for testing purposes. The DIV that I want to change in item 2 is the YELLOW one. The DIV that I want to force to the bottom is the RED one.

    TIA


    Here's the code from the two files:

    body {
    background-color:Blue;
    }
    #top{
    position:absolute;
    justification:center;
    width:100%;
    Height:20;
    background-color:lightblue;
    valign:center;
    padding-left:10;
    }
    #left{
    position:absolute;
    width:140px;
    top:75px;
    height:85%;
    background-color:green;
    }
    #right{
    position:absolute;
    top:75px;
    left:155px;
    background-color:yellow;
    }
    #bottom{
    position:relative;
    height:15px;
    background-color:red;
    }

    <html>
    <LINK REL="stylesheet" type="text/css" href="newstyle.css">
    <body>
    <div id="top">
    <h1>New Horizon Properties & Investments, L.L.C.</h1>
    </div>
    <div id="left">
    This is the "Left" div.
    </div>
    <div id="right">
    This is the "Right" div.
    </div>
    <div id="bottom">
    <center>Copyright New Horizon Properties & Investments, L.L.C.</center>
    </div>
    </body>
    </html>

  • #2
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    layers (DIV) will automatically expand to the full width.

    I dont have time to go into a detailed explanation but you may want to have a look at the "float" property as it will be your main way of positioning.

    some sites to look at that use CSS:

    http://www.ithium.net
    http://www.mindlesslemming.au.ms
    <plug type="shameless">
    http://www.freeipb.net/ibe
    </plug>

    If you look over how each site has been made and have a go you will learn alot.

  • #3
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by missing-score

    http://www.mindlesslemming.au.ms
    <plug type="shameless">
    LOL
    Thanks for that, none of my work has been used as an example to others before...
    Although, that site was made when I had only known about CSS for three months.
    My current project's use is far more advanced.
    Navigate Australia

    *Seeing as you're using absolute positioning, just give
    #bottom{position:absolute;bottom:10px;}.

    This isn't the best fix, but I feel the next step might be a little much for you at this point. (no offense )

    You should know that position:absolute takes elements out of the natural flow of the page, which often causes problems if you want an inline element to fall beneath the absolutely positioned div.

    Andrew
    Last edited by mindlessLemming; 02-22-2004 at 04:48 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #4
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats the one! I couldnt remember the address so I just found your profile and took the link, didnt think to check if it was the right one.

    Having said that, your mindlessLemming site is still very cool

  • #5
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Originally posted by mindlessLemming
    *Seeing as you're using absolute positioning, just give
    #bottom{position:absolute;bottom:10px;}.

    This isn't the best fix, but I feel the next step might be a little much for you at this point. (no offense )

    You should know that position:absolute takes elements out of the natural flow of the page, which often causes problems if you want an inline element to fall beneath the absolutely positioned div.
    I was trying to avoid using absolute for that very reason--but I couldn't find a better way to accomplish it.

    The goal is to have a header, two colums (the left is my link menu and needs to be around 120-135 px wide & the right should be the width of the window - the width of the left column - some padding between the columns) and one footer.

  • #6
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    3 Columns, header, footer always at bottom unless content extends.
    Here you go


    (ignore the gross colours!)

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

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