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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Div's width set to 100% doesn't fill the entire screen ?

    I've got a few div tags on a page that should go all the way across the screen. To make things easier I assigned a class to them and set that class' width to 100%. However for some reason in IE (6.0), they don't go all the way across the screen - they stop about 40 pixels from the right. Does anyone know why ?

    TIA

    Jef
    Attached Thumbnails Attached Thumbnails Div's width set to 100% doesn't fill the entire screen ?-screenshot.gif  

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What happends when you reload the page? What attributes or style are in your body tag?
    A div's default width is 100% so there must be something in your code (or not) that's doing it.

  • #3
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My body tag is empty and I haven''t assigned any classes to it. Below is the class I've assigned to one of the top div's :

    .pageHeader, .pageFooter {
    position : absolute;
    background-color : #707070;
    left : 0px;
    color : #FFFFFF;
    width : 100%;
    }

    .pageHeader {
    top : 0px;
    height : 100px;
    }

    Upon resizing and/or reloading the page, the div keeps an identical distance from the right margin. I'm doing some stuff in the onLoad but nothing that should influence the width of any layer ...

    Regards

    Jef

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Might try:

    body {
    overflow: hidden;
    }

    Could have undesirable consequences, though.

    http://www.blooberry.com/indexdot/cs...n/overflow.htm

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or:

    body {
    margin:0px;
    padding:0px;
    }

  • #6
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I've reset the position attribute to relative and suddenly the margin is decreased - now it's just wide enough to fit a scrollbar (if there should be any). Is this normal ?

    Tried the padding and margin - didn't do much (but thanks anyway).

    Jef

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When you copy-paste and preview this is there still a border at the right? Don't think so. Must have something to do with widths/positioning. (I'm on a Mac, don't have Win/IE6.)


    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body style="margin:0px;padding:0px;">

    <div style="height:80px;background:#666;"></div>

    <div style="background:#ccc;">
    <div style="height:60px;margin:10px 10%;background:#ebebeb;"></div>
    <div style="height:60px;margin:10px 10%;background:#ebebeb;"></div>
    <div style="height:60px;margin:10px 10%;background:#ebebeb;"></div>
    </div>

    <div style="height:100px;background:#fff;"></div>
    <div style="height:80px;background:#666;"></div>
    </body>
    </html>

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The body style="overflow:hidden" should take away any scrollbars and give you a completely whole screen.

    Outside shot...but maybe your screen resolution got reset (sometimes mine does for some reason)...

    Reset to 800 x 600 or higher.
    Last edited by zoobie; 10-15-2002 at 07:50 PM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #9
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I'll try it tomorrow (getting kinda late over here) - I'll keep you informed...

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had that problem in NS4.x...

    I just put width:110%;

    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·

  • #11
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi guys - sorry for the late reply but it's been real busy over here. Anyway I wanted to thank you all for your suggestions - unfortunately I won't be "able" to test them as we've taken a different approach to the page layout since yesterday (typically really - get close to a solution and the entire thing gets changed ) but I will keep them in mind for future reference.

    Thanks

    Jef


  •  

    Posting Permissions

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