+ Reply to Thread
Results 1 to 9 of 9

Thread: how to make a layer: fixed width, 100% height?

  1. #1
    Moderator airnine is on a distinguished road
    Join Date
    Jan 2004
    Posts
    78

    Question how to make a layer: fixed width, 100% height?

    Hi guys,

    If anybody is up to it, I would need some assistance. The thing is that, if I put a layer to be 100% of width and 100% of height, it works in all the major browsers, so my layer is stretched as meant, however if I put a layer to be of fixed width like 780px and 100% in height, it will work only in IE, but not in other browsers (Firebird, Opera, Mozilla and Netscape). In those browsers a layer will be as high as there is content within it.

    Has anybody got any tricks up one's sleeve that could solve this problem?

    Thanks to all,
    Airnine
    -------------------------------
    Airnine is a developer @
    www.promomedium.com
    -------------------------------

  2. #2
    Active Member WorldBuilder is on a distinguished road
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    366
    Website or code to look at? If it only works in IE, then it's probably something wrong with syntax (or something related), since Gecko browsers and Opera generally render properly.

    Chris
    My Site | My Blog
    "The world is a dangerous place, not because of those who do evil, but because of those who look on and do nothing."
    "Insanity is doing the same thing over and over again, expecting different results"
    --Albert Einstein

  3. #3
    Moderator airnine is on a distinguished road
    Join Date
    Jan 2004
    Posts
    78
    <html>
    <body>
    <div style="top:0px; left:auto; right:auto; height:100%; width:780px;">
    </div>
    </body>
    </html>

    as for the Opera I'm begining to realize it has rather poor support for css

    some sutff appear rather bizzare in Opera and I think it has problems with distinction between margin and padding

    then again, it might just be me

    Airnine
    Last edited by airnine; February 24th, 2004 at 05:47 PM.

  4. #4
    Moderator airnine is on a distinguished road
    Join Date
    Jan 2004
    Posts
    78
    As a matter, most of the time I surf using Firebird and for me it's like this, if it works in Firebird, it's proper code and if isn't than it's not

  5. #5
    Active Member WorldBuilder is on a distinguished road
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    366
    What's the URL?

    You can PM it to me if you don't want it public for some reason. I'd like to test it. Other than the fact that Gecko browsers and Opera generally don't like %%%'s, it looks ok. Perhaps there is something else interfering! Can I see the whole page, please?

    Chris
    My Site | My Blog
    "The world is a dangerous place, not because of those who do evil, but because of those who look on and do nothing."
    "Insanity is doing the same thing over and over again, expecting different results"
    --Albert Einstein

  6. #6
    Active Member WorldBuilder is on a distinguished road
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    366
    When using % the height is calculated of the parent element.

    Try to set , in css.

    html, body {
    height:100%;
    }

    See what that does. Check out http://www.w3.org/TR/CSS21/visudet.h...eight-property for more.

    By the way, the properties top, left, right, bottom have no meaning without "positon: relative/absolute/fixed;". Better to use margin. At least, I think! HA!

    Let me know!

    Chris
    My Site | My Blog
    "The world is a dangerous place, not because of those who do evil, but because of those who look on and do nothing."
    "Insanity is doing the same thing over and over again, expecting different results"
    --Albert Einstein

  7. #7
    Full Member Bobert is on a distinguished road
    Join Date
    Mar 2004
    Location
    Huntsville, AL.
    Posts
    8
    I had the same problem a while ago on a project. I eventually came up with a solution.

    Try positioning the element like this and not worrying about the height:

    Code:
    .tallDiv {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 780px;
    }
    That will stick the bottom of the div to the bottom of the page and the top side to the top respectively.

  8. #8
    Active Member WorldBuilder is on a distinguished road
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    366
    First post and already helping! Welcome to WML, Bobert!

    Chris
    My Site | My Blog
    "The world is a dangerous place, not because of those who do evil, but because of those who look on and do nothing."
    "Insanity is doing the same thing over and over again, expecting different results"
    --Albert Einstein

  9. #9
    Full Member Bobert is on a distinguished road
    Join Date
    Mar 2004
    Location
    Huntsville, AL.
    Posts
    8
    Thanks for the welcome.

    I had to help with this one, as I love all things CSS.

+ Reply to Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Posting Permissions

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