SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float right IE7 problem

    HI guys,

    I'm hoping someone can point me in the right direction.

    I have a 3 column layout. Two menu columns floated right and a main body column. Hopefully you can see the image attached.

    The layout works fine in all browsers when all div tags have content within them.

    For some pages my 'right' column has no content and so I want the 'left' column to move all the way right to take the place of the 'right' column and the mainbody column to fill the remaining space.

    This works great in all latest browsers.

    HOWEVER. in IE7 the 'left' column stays put and the main body stays as it was too so there's just a big empty space where the 'right' column was.

    It seems that when the div tag is empty the latest browsers know to ignore it and so the left column floats right and the mainbody expands to fill the gap. However on IE7 it does not ignore the 'right' div tag when it's empty.

    Hopefully the attachment helps clarify what's happening.

    Thanks in advance for any pointers.

    Owen
    Attached Images Attached Images

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi and welcome

    Do you have an url for us to look at?

    As a new member you will not be able to pot the url directly but you can use the following:

    www dot my site dot com

    It will make it easier for us to debug
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Luki,

    Unfortunately not - it's on my localhost.

    I think I may have found a workaround/fix. I had specified widths in the CSS for the div tags originally. Now I have instead specified widths to the content elements placed within those div tags.

    Now, it seems, that the right column, although not ignored by IE7 has no width and so makes room for the left column to move further right.

    Seems to work. Funny how you can mess about for hours trying to find a solution and as soon as you post a question online a new approach hits you between the eyes.

    If anyone can suggest a better/neater workaround I'd love to hear it.

    Thanks.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    We need at least the full HTML and CSS to reproduce this. Right now we would merely be guessing
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry guys...

    Here's the HTML:
    <div id="wrapper">

    <div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div>

    <div id="left"><jdoc:include type="modules" name="left" style="xhtml" /></div>
    <div id="mainbody"><jdoc:include type="component" /></div>
    </div>
    Here's the CSS:
    #wrapper{
    width:780px;
    margin:auto;
    background-color:#FFFFFF;
    }

    #mainbody {
    min-height:400px;
    margin-left:10px;
    margin-right:195px;
    border-right:thin dashed #999999;
    color: #666666;
    padding-right:10px;
    }

    #left {
    float:right;
    /*width:175px;*/
    margin-left:10px;
    margin-right:10px;
    color:#666666;
    font-size:11px;
    font-weight:normal;
    }

    #right {
    float:right;
    /*width:185px;*/
    padding-left:10px;
    color: #666666;
    font-size:11px;
    line-height:15px;

    }


  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I has a question.

    With your old code (widths left in), does IE7 start doing what the other browsers do if you remove the min-height from the mainbody?

    I ask because you've got margins on the sides and min-height triggers haslayout, which does make IE6 and 7 act differently with margins and floats.

    I won't explain more if removing the min-height doesn't work, because that would mean I'm totally on the wrong track anyway.

    Also, does you haz a doctype? Your HTML doesn't show us.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the suggestion. Tried putting the widths back in and removing the min-height property, but made no difference in IE7

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm unable to test in anything other thent IE (friend won't download it..) but this works for IE7. Mix and match your FF version with this if FF doesn't comply
    Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <style>
    #wrapper{width:780px;
    margin:auto;
    background-color:#FFFFFF;
    }
    
    #mainbody {
    min-height:400px;
    margin-left:10px;
    margin-right:195px;
    border-right:thin dashed #999999;
    color: #666666;
    background:green;
    padding-right:10px;
    }
    
    #left {
    float:right;
    width:175px;
    margin-left:10px;
    margin-right:10px;
    color:#666666;
    background:blue;
    font-size:11px;
    font-weight:normal;
    }
    
    #right {
    float:right;
    max-width:185px;
    background:red;
    color: #666666;
    font-size:11px;
    line-height:15px;
    
    }
    </style>
    </head>
    <body class="home">
    <div id="wrapper">
    <div id="right"></div>
    
    <div id="left">asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
    
    asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
    
    asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </div>
    <div id="mainbody">asdf</div>
    </body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks RyanReese. SO basically what you're saying is use max-width rather than width for the right div?

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well logically if there isn't content we don't want that div to be 175px. We should let it expand to 185px that way it will allow for trhe situation of no content for it to collapse, but if it DOES have content it will go to that width (maximum)

    I hope I've explained it so you understand .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •