SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Skåne, Sweden.
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unwanted gap between DIV's in IE6

    What am I missing here?
    Below is a very basic example of what I'm trying to do, but IE6 won't display it correctly. Mozilla, FireBird, Netscape, Opera, they all do it correctly, but IE6 is misbehaving. I want the red div in the middle, and the blue div floating to the left of it, but there is a gap between them in IE6.
    Is this a known problem? Any work-arounds?
    An obvious "solution" would be to make the background of 'container' either blue or red, but this won't cut it in this situation. This is only a small section of a much more complicated layout. I've removed the rest of the code for simplicity, the code below demonstrates the problem.

    Code:
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>test</title>
    <style type="text/css" media="screen">
    #container {
    	margin: 0;
    	padding: 0;
    }
    
    #left {
    	background-color: blue;
    	width: 100px;
    	height: 100px;
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    
    #right {
    	background-color: red;
    	height: 100px;
    	margin-left: 100px;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 0;
    	padding: 0;
    }
    </style>
    	</head>
    	<body>
    		<div id="container">
    			<div id="left"></div>
    			<div id="right"></div>
    		</div>
    	</body>
    </html>
    Your input is appreciated.
    Thanks.

  2. #2
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Skåne, Sweden.
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, solved it.
    Setting the width of the left DIV to 103px, and then giving it a -3px right margin did the trick. IE


Bookmarks

Posting Permissions

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