SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Float margin

  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Lithuania, Europe
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float margin

    Here's an extremely simple example: in IE there's some margin between the two floated divs. How do I get rid of it? The problem does not occur in FF.

    HTML
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    	<head>
    		<title>Site</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<link href="style2.css" rel="stylesheet" type="text/css" />
    	</head>
    	<body>
    		<div id="container">
    			<div id="div1"></div>
    			<div id="div2"></div>
    		</div>
    	</body>
    </html>
    CSS
    Code:
    html, body
    {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #AAAAAA;
    }
    
    #container
    {
      margin-left: 30px;
    }
    
    #div1, #div2
    {
    	height: 80px;
    }
    
    #div1
    {
    	width: 150px;
    	background-color: green;
    	float: left;
    }
    
    #div2
    {
    	background-color: blue;
    }

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One solution is to add margin-right:-3px; in #div1
    http://www.sitepoint.com/forums/show...5&postcount=15

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Lithuania, Europe
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, problem resolved by using Dan's solution. Somehow all4nerds' solution doesn't work in my layout (in the example it does work however).


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
  •