SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Location
    Mesa, AZ
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using percentages and pixels together

    What I am trying to do is to have a div 100px high and as wide as the window, and below that have two other touching divs, one 220px wide and as high as the window, and the other as wide and high as the remaining portion of the window.

    Pixels and percentages are not playing nicely together. Any other suggestions?

    Here's the code:


    <div style="position:absolute; top:0px; left:0px; height:100px; width:100%; background-color:#000000; z-index:2; overflow:hidden; border-style:ridge; border-color:#FFFFFF">
    </div>
    <div style="position:absolute; top:100px; left:0px; width:100%; height:100%; background-color:#FFFFFF; z-index:2; overflow:scroll; border-style:ridge; border-color:#FFFFFF">
    </div>
    <div style="position:absolute; top:100px; left:220px; height:100%; width:100%; background-color:#DDDDDD; z-index:2; overflow:scroll; border-style:ridge; border-color:#FFFFFF">
    </div>


    Thanks in advance,

    Hamp
    There are 10 types of people in this world. Those who understand binary, and those who don't.

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of the 'height' property try using 'bottom: 0px'.

    I don't think IE plays nicely with it, though--everyone should be mandated to use Mozilla... ;-)

    ~~Ian

  3. #3
    SitePoint Member
    Join Date
    Sep 2002
    Location
    East Coast
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out Bluerobots Layout Reservoir, you can check out the CSS for yourself. It would take way to much space to past it here.
    I owe you one witty remark - Wax

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Who's following whom, now? :-p

    ~~Ian

  5. #5
    SitePoint Member
    Join Date
    Sep 2002
    Location
    Mesa, AZ
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Okay, okay

    I don't think I expressed well enough specifically what I am doing.

    First of all, I am using an apparently unconventional way to layout my pages using CSS.

    That being said, here's what I am working on right now. http://www.darwinscomplex.com/improv/improv.html.

    Here are the things I want to do with it that I currently am struggling with:

    I want the width and height to be at the very right and bottom edge of the page regardless of how small my content inside the divs. This means the black bar at top goes all the way to the right but no further, the white bar at the left goes to the bottom but no further, and the grey box where the image goes ends at the right and bottom edges. If the image in the grey div is larger than the window area, that's what the internal scroll bars are for.

    I want to float text (like the TITLE! text) in the exact center of the black bar, regardless of the width of the user's window.

    Eh... I think that's everything I need o do that I can't figure out how to make work. Oh, the black bar at the top must remain 100px high, and the white bar at the left must remain 220px wide. And the white and grey divs must both reman scrollable.

    Thanks for any help you can provide. I'll be working on this all day until I get it working. And Ian, like the name (my real name is the same but with an extra i (Iain) to confuse people even further).

    - Hamp
    There are 10 types of people in this world. Those who understand binary, and those who don't.

  6. #6
    SitePoint Member
    Join Date
    Sep 2002
    Location
    Mesa, AZ
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Okay, got it.

    Nevermind, got it. =)

    Thanks for your help.

    - Hamp
    There are 10 types of people in this world. Those who understand binary, and those who don't.


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
  •