SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float problem with IE think FF is correct

    Hi there,

    Alas this positioning stuff has again foiled me.

    Here's the problem!

    I have the following css code

    #sitemapleft{
    float:left;
    width:49%;
    background-color:#0033CC;
    }

    #sitemapright{
    margin-left:50%;
    background-color:#99CC33;
    }

    to position my site map elements on my site map page

    It seems to do what I want in FF but in IE it's causing me problems.

    I have included background colors so you can see the difference.

    The link to the page is http://www.askaboutvalidation.com/site_map.php

    Hope someone and clear this up for me.

    Regards

    Graham

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    Float both columns,
    Code:
    #sitemapright{
      width:50%;
      float: left;
      background-color:#99CC33;
    }
    Hope it helps

    I believe it's a hasLayout issue - though I've been wrong before.. once.
    So there's probably another fix for IE but Floating is a pretty clean solution and you can have columns in either order that way.

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to confirm, is it ok to float both divs to the left?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Yes, two floats will stack side by side if there's room but you'll have 1% gap on the right - because of your widths. If you float one left - one right there'll be 1px gap in the middle.
    You can make it 1px if you want which is slightly less noticeable: And only IE is effected by the bug so you could make it perfect widths in all other popular browsers if you wanted.
    You will need to clear the floats though - so the parent doesn't collapse

    http://www.yellowshoe.com.au/tips/ex...S-Columns.html

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "You will need to clear the floats though - so the parent doesn't collapse"

    How do I do this i am running into this problem now the parent is collasping how do I clear this problem

    tks

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    How do I do this i am running into this problem now the parent is collasping how do I clear this problem
    A pun

    It's all in the FAQ - There's some real gold in there so check it out.
    'clearfix' or adding a clearing div after your columns will solve it.

    The easiest(and least elegant) way:
    Code:
    <div>
      <!-- Column1 -->
      <!-- Column2 -->
      <div style="clear: both"></div>
    </div>

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you


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
  •