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 6 of 6
  1. #1
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts

    div floating creates a slight gap in IE, how to fix???

    I'm redesigning a site which has tables and I'm going to use divs but I must be missing something obvious. Here's a sample of the code that's causing me the problem.

    Code:
    <html>
    <head>
    <style>
    .left {
    	width:100px;
    	height:100px;
    	float:left;
    	background-color:red;
    }
    .right {
    	width:auto;
    	height:100px;
    	background-color:blue;
    }
    </style>
    </head>
    <body>
    <div class="left"></div>
    <div class="right"></div>
    </body>
    </html>
    in IE, I end up getting a small 3-5px gap between the divs.

    Yep, I've tried changing margins / padding / border.

    Yep, I'm not in quirks mode.

    I know this is something easy, but I just can't get it. I hate it when this happens.

  2. #2
    Senior Coder
    Join Date
    Mar 2003
    Location
    OHIO
    Posts
    1,438
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In IE 5.1.7 on my Mac there is no gap. The only suggestion I have is to add body {margin: 0px; padding: 0px} and/or html>body {margin: 0px; padding: 0px} and see if that helps.

    I also have one question. Which doctype are you using that takes you out of "quirks" mode? 4.01 strict? Thanks.

    MNS
    [size=1]"If you want to be "in the biz" you are going to have to roll with the changes or get out, basically."

  3. #3
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    Doctype = XHTML 1.0 Strict

    Still no go with the suggestions. What I'd like to accomplish is a 2 column layout with such that if the right column (which will be my content) is longer than the left, it will not wrap back to the left, and I'd like to avoid absolute positioning of the elements.

  4. #4
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    Never mind, I figured it out.

    See below
    Code:
    body {
    	border:0px;
    	padding:0px;
    	margin:0px;
    }
    .left {
    	width:100px;
    	height:100px;
    	border:0px;
    	margin:0px;
    	padding:0px;
    	float:left;
    	background-color:red;
    }
    .right {
    	margin:0px;
    	margin-left:100px;
    	padding:0px;
    	background-color:blue;
    }

  5. #5
    Senior Coder
    Join Date
    Mar 2003
    Location
    OHIO
    Posts
    1,438
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks. I thought it was "strict". That works well in IE and Netscape 7 on my Mac.

    MNS
    [size=1]"If you want to be "in the biz" you are going to have to roll with the changes or get out, basically."

  6. #6
    Regular Coder
    Join Date
    Apr 2003
    Location
    On the W3C and W3schools web sites.
    Posts
    159
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a streamlined and validated version of the CSS:

    Code:
    body , .left {
    border : 0;
    margin-left : 0;
    }
    body , .left , .right {
    padding : 0;
    margin-right : 0;
    margin-top : 0;
    margin-bottom : 0;
    }
    .left {
    width : 100px;
    height : 100px;
    float : left;
    background-color : red;
    color : white /* Put a color here */;
    }
    .right {
    margin-left : 100px;
    background-color : blue;
    color : white /* Put a color here */;
    }
    None of the values are repeated to make it easy to change in the future. Grouping styles together really helps instead of changing tons of the same attributes.

    You need to specify colors to go on your background. Also, you had a margin value specified twice. This makes it more efficient


 

Posting Permissions

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