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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    97
    Thanks
    7
    Thanked 7 Times in 7 Posts

    100% width isn't quite full width I.E.

    Hi,

    I've worked and fiddled with CSS for quite some time now but I recently discovered a new "oddness" with 100% widths and I.E. that I hadn't had need to come across before. I was wondering if anyone was familiar with this and even new a work around for I.E.

    I've been investigating the possibility of a layout with both a mid page navigation bar and a footer that bleeds to the full width of the screen. To help visualise what I am talking about you can look at this with Mozilla.
    http://www.mtod.co.uk/cssexp

    Now in developing this I noted a couple of things:

    In both Moz & I.E 100% width actually leaves a small border at the edge of the page. This can be fixed for Mozilla by using position: absolute and left: 0px. Forcing the block to the absolute edges.

    In I.E. this solution left an even bigger "gap" at the right hand side. So just playing around with my browsers set at 1024 resolution I discovered that giving 100% widht to Moz & 102% width to I.E. forced the block to both edges in both browsers.

    The code for my example is as follows:

    CSS:
    Code:
    .pageContainer
    {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100% !important;	  
    width: 102%; 
    background-color: #ccc;
    }
    
    .navBar
    {
    width: 100%
    display: block;
    background-color: #fff;
    }
    XHTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    <title>test page</title>
    
    <link rel ="stylesheet" type ="text/css" href ="styles.css"/>
    
    </head>
    
    <body>
    
    	  <div class=pageContainer>
    	  	   hello
    
    		   <div class=navBar>
    				hello
    		   </div>
    		   hello
    	  </div>
    
    </body>
    </html>
    Now at this point I thought I had been quite clever until I started resizing the I.E. browser. Now you see I.E. seems to be dynamically altering this percentage as the page resizes down to smaller screen sizes. As you make the browser window smaller a gap appears on the right hand side, the smaller you go the larger the gap gets.

    Just open my example http://www.mtod.co.uk/cssexp in I.E. and drag the browser around a bit to see what I mean.

    OK, I'm sorry this was so long & I hope I've explained myself properly. Has anyone got any clue how to gt I.E. to behave itself here or have I just found another brick wall to bang my head against?

    Thanks in advance

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,706
    Thanks
    0
    Thanked 236 Times in 231 Posts
    Hi there mattyod,

    There is no need to use absolute positioning for this.
    Just set body margins and padding to 0px.....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>test page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <style type="text/css">
    /*<![CDATA[*/
    html {
         overflow:auto;      /* this removes the scroll in IE */
     }
    body {
         margin:0px;
         padding:0px;
     }
    .pageContainer {
         background-color:#ccc;
         color:#000;
    }
    
    .navBar {
         background-color:#fff;
         color:#000;
    }
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div class="pageContainer">
    hello
    <div class="navBar">hello</div>
     hello
    </div>
    
    </body>
    </html>
    coothead

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto width

    Besides that, divs should have default "width: auto;" which should make 'em fill the available horizontal space to the brim anyway--provided they're left in the normal flow, that is.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    97
    Thanks
    7
    Thanked 7 Times in 7 Posts
    aha thank you. It hadn't occured to me that the problem could be with padding & margins on the main body.

    There is still a tiny quirk with this method in that if you squish the I.E. browser so that it doesn't cover the full height of the content (the 3 colorod lines in this case) then suddenly a horizontal scroll bar appears and the content becomes slightly wider than the visible area.

    Removing the "overflow:auto" from the html section fixes this. What does that line do exactly?


  •  

    Posting Permissions

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