[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2007-07-30
Medium Priority
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

Mark Steggles earned 2000 total points
ID: 19595483

This should do it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>

Author Comment

ID: 19595519
Works great, thanks!

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

873 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