Div layer at 100% width leaves right side gap in IE

Posted on 2007-07-30
Last Modified: 2008-01-09
I'm trying to make a header graphic which stretches (tiles actually) all the way across the top of the browser and leaves no gaps. Here's the code so far:


<div style="position: absolute; height: 123px; z-index: 1; left: 0px; top: 0px; width: 100%; background-image: url('header.png'); background-repeat: repeat-x" id="layer1">


The problem is that IE seems to be leaving a small gap on the right hand side of the div layer. How can I make this stretch to 100% of the width? I'm using IE 7.
Question by:jimstar
    LVL 30

    Accepted Solution


    This should do it

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <style type="text/css">
    * {padding:0;margin:0;}
    html, body {height:100%;width:100%;}
    #layer1 {width:100%;background: url(header.png) repeat-x left top;}
    <div id="layer1">top</div>
    LVL 4

    Author Comment

    Works great, thanks!

    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Join & Write a Comment

    Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now